Html 带有伪元素的不规则形状的渐变边框

发布于03月31日

有没有可能用css来实现这样的事情？我的意思是渐变边界与底部的伪元素(勾号)相结合.

当时我只做了一个渐变...

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/
    linear-gradient(to right, #9c20aa, #fb3570) border-box;
  color: #313149;
  padding: 10px;
  border: 5px solid transparent;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
}

<div class="white-grad"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>

不幸的是，我不知道如何在突出的元素上做到这一点

推荐答案

你可以像下面这样做.我知道代码看起来很疯狂，但我很快就会有一篇关于它的详细文章.在此之前，您只需调整几个变量即可控制形状:

.tooltip {
  --r: 30px; /* border radius*/
  --b: 5px;  /* border length */
  --s: 30px; /* arrow size */
  --c: linear-gradient(60deg,#E84A5F,#355C7D);
  
  max-width: 410px;
  font-size: 20px;
  padding: calc(var(--r) + var(--b));
  position: relative;
  font-weight: bold;
  font-family: sans-serif;
}
.tooltip::before {
  content: "";
  position: absolute;
  inset: calc(-1*var(--s));
  border-radius: calc(var(--r) + var(--s));
  border: var(--s) solid #0000;
  padding: var(--b);
  background: var(--c) border-box;
  -webkit-mask: 
    conic-gradient(from -60deg at calc(80% - var(--b)) calc(100% - var(--b)/1.4), #000 60deg,#0000 0)
     50% calc(100% - var(--b)) /100% var(--s) no-repeat,
    linear-gradient(#000 0 0) content-box,
    conic-gradient(from -60deg at 80% 100%, #000 60deg,#0000 0)
     bottom/100% var(--s) no-repeat,
    linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #b7e3f1;
}

<p class="tooltip">
  Sugar plum ice cream icing apple pie cotton candy gummi bears chupa chups cheesecake apple pie. Biscuit macaroon biscuit chocolate cake tiramisu. Wafer cupcake gummi bears tiramisu gingerbread icing lemon drops. Chocolate chocolate bar bonbon cake wafer oat cake. Lemon drops wafer cookie cake tiramisu
</p>