CSS：谈话泡泡[重复]答案

【问题标题】：CSS: Talk Bubble [duplicate]CSS：谈话泡泡[重复]
【发布时间】：2015-07-25 15:39:50
【问题描述】：

我现在有一个 jfiddle。这是我在网上找到的一个代码，用于实现对话泡泡https://jsfiddle.net/3L5abt5t/

但是，当我运行代码时，三角形部分似乎是绿色的。我希望它是透明的，只有一个绿色的轮廓。抱歉，CSS 新手。这可能是一个简单的修复。任何帮助将不胜感激！谢谢！

和这段代码有关系吗？

.triangle-border.left:before {
  top: 10px;
  bottom: auto;
  left: -30px;
  border-width: 15px 30px 15px 0;
  border-color: transparent #5a8f00;
}

【问题讨论】：

标签： css css-shapes

【解决方案1】：

.triangle-border  {
    border: 5px solid #5a8f00;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    width: 200px;
    margin: 0 auto;
}
.triangle-border:before, 
.triangle-border:after {
    content: ''; 
    position: absolute; top: 50%; left: -40px;
    border: 20px solid transparent;	
    border-right: 20px solid #5a8f00;    
     -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
        transform: translate(0,-50%);
}
.triangle-border:after {
    border-right: 20px solid white;
    left: -33px; 
}

&lt;p class="triangle-border "&gt;But it could be any element you want.&lt;/p&gt;

【讨论】：

【解决方案2】：

您可以创建两个三角形，一个在另一个之上，一个是绿色的，一个是白色的，这样您就可以创建边框效果，这是我刚刚创建的一个示例来说明您的解决方案：@987654321 @

<div id="test"></div>
<div id="test2"></div>

#test {
    position: absolute;
    z-index: 0;
    width: 
    height: 0;
    border-style: solid;
    border-width: 65px 112.6px 65px 0;
    border-color: transparent green transparent transparent;
}
#test2 {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 55px 95.3px 55px 0;
    border-color: transparent white transparent transparent;
}

【讨论】：

【解决方案3】：

尝试添加不透明度

.triangle-border.left:before {
  top: 10px;
  bottom: auto;
  left: -30px;
  border-width: 15px 30px 15px 0;
  border-color: transparent #5a8f00;
  opacity: 0.4;
}

【讨论】：

演示jsfiddle.net/1Lexonbt/2

【解决方案4】：

我认为，好的方法是添加带边框的透明 png 图像。

【讨论】：