Question

我现在有一个小伙子。这是我在网上发现的实施谈话泡泡的代码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

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

Answer 2

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

<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

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

CSS：谈论泡泡

4 个答案: