如何用三角形做一个透明的泡泡聊天？

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>

如何用三角形做一个透明的泡泡聊天？

How to make a transparent bubble chat with triangle?

html

css

css-shapes