我需要进行透明的气泡聊天，因为我需要图像作为背景，有什么想法吗？

Question

除了边框以外，我需要进行所有透明的气泡聊天 像这样：

我发现一个很好的设计可以开始：

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

问题在于，气泡聊天所指向的三角形通常是通过折叠宽度和扩大边框来制作的，并且由两个三角形组成，一个用绿色上色，另一个用白色上色：

一个彩色的白色：

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;

最后一个an后面的另一个三角形用绿色着色：

  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;

它看起来像这样：

所以我无法使其透明，因为如果将其设置为透明，则顶部下方的三角形将变为绿色

有什么主意我该如何解决？

我是菜鸟，我很拼命，任何帮助将不胜感激。

Answer 1

这是一个依赖多个背景的想法：

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

您可以在其中添加一些CSS变量来轻松控制它：

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