CSS：对话泡泡

Question

我现在有一个 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;
}

Answer 1

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

Answer 2

你可以在另一个上面创建两个三角形，一个是绿色的，一个是白色的，这样你就可以创建边框的效果，这里是我刚刚创建的一个例子来说明你的解决方案： DEMO

<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;
}

Answer 3

尝试添加不透明度

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

Answer 4

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

<p class="triangle-border ">But it could be any element you want.</p>

CSS：对话泡泡

CSS: Talk Bubble

css

css-shapes