How to make a transparent bubble chat with triangle?

Question

I need to do a bubble chat all transparent, except by the borders somtehing like this:

I have found an excellent design to start with:

https://codepen.io/cool_lazyboy/pen/BWxggN

The problem is that the triangle that points of the bubble chat is made as usual by collapsing the width and expanding the borders, and it's made by two triangles, one has been colored with green and another with white:

The one colorized white:

width: 0px;
height: 0px;
position: absolute;
border-left: 7px solid #fff;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
border-bottom: 7px solid transparent;

And the other other triangle that is behind the last one an is colorized with green:

  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid #00bfb6;
  border-right: 10px solid transparent;
  border-top: 10px solid #00bfb6;
  border-bottom: 10px solid transparent;
  right: -21px;
  top: 6px;

And it looks something like this:

so i'm unable to make it transparent, because if I set it transparent, the triangle on the top the triangle that is under and is green will show up

Any ideas how can I fix this?

Answer 1

Here is an idea that rely on multiple backgrounds:

.box {
  width:200px;
  height:150px;
  margin:20px;
  box-sizing:border-box;
  padding-bottom:40px;
  border-top:15px solid #fff;
  background:
    /* the arrow*/
    linear-gradient(to bottom left ,transparent 49%,#fff 50% calc(50% + 11px),transparent 0) bottom 0 right -15px/55px 55px , 
  
    
    /* right line */
    linear-gradient(45deg,transparent 10px,#fff 0) right /15px 100%,
    /* Left line */
    linear-gradient(#fff,#fff) left  /15px 100% content-box,
    /* bottom line */
    linear-gradient(#fff,#fff) left bottom/calc(100% - 40px) 15px content-box;
  background-repeat:no-repeat;
}


body {
  background:linear-gradient(to right,blue,red);
}

<div class="box">

</div>

Where you can add some CSS variables to easily control it:

.box {
  --t:15px;  /* Thickness */
  --s:40px; /* Arrow size*/
 
  width:150px;
  height:120px;
  margin:10px;
  display:inline-block;
  box-sizing:border-box;

  padding-bottom:var(--s);
  border-top:var(--t) solid #fff;
  background:
    /* the arrow*/
    linear-gradient(to bottom left ,transparent 49%,#fff 50% calc(50% + var(--t)*0.707),transparent 0) bottom 0 right calc(-1*var(--t))/calc(var(--s) + var(--t)) calc(var(--s) + var(--t)), 
  
    
    /* right line */
    linear-gradient(45deg,transparent calc(var(--t)*0.708),#fff 0) right /var(--t) 100%,
    /* Left line */
    linear-gradient(#fff,#fff) left  /var(--t) 100% content-box,
    /* bottom line */
    linear-gradient(#fff,#fff) left bottom/calc(100% - var(--s)) var(--t) content-box;
  background-repeat:no-repeat;
}


body {
  background:linear-gradient(to right,blue,red);
}

<div class="box">
</div>

<div class="box" style="--t:5px;--s:50px">
</div>

<div class="box" style="--t:5px;--s:30px">
</div>

<div class="box" style="--t:10px;--s:30px">
</div>