Gradient border on irregular shape with pseudo element

Question

Is it possible to achieve something like this using CSS? I mean a gradient-border combined with a pseudo-element (tick) at the bottom.

At the moment I only made a gradient...

.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>

...unfortunately I don't know how to achieve it on the protruding element

Answer 1

You can do it like below. I know the code look crazy but I will soon have a detailed article about it. Until then you can simply adjust a few variable to control the shape:

.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>