How to make a transparent bubble chat with triangle?

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?