如何用三角形制作透明泡泡聊天？答案

【问题标题】：How to make a transparent bubble chat with triangle?如何用三角形制作透明泡泡聊天？
【发布时间】：2020-02-21 09:05:16
【问题描述】：

我需要做一个透明的泡泡聊天，除了边框是这样的：

我找到了一个很棒的设计：

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;

它看起来像这样：

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

有什么办法可以解决这个问题吗？

【问题讨论】：

除了像这样的边界之外
“欢迎”屏幕截图来自哪里/哪个网站？
无论如何，我认为不可能让它透明，因为这样就会出现主框边框“在”箭头的透明部分“下方”。只需在 Google 上搜索“css 报价气泡透明箭头”——您会在网上找到大量解决方案。

标签： html css css-shapes

【解决方案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>

【讨论】：