CSS: Talk Bubble

Question

I have a jfiddle right now. This is a code I found online implementing a talk bubble https://jsfiddle.net/3L5abt5t/

However, when I run the code, the triangle part seems to be green. I want it to be transparent and just have a green outline. Sorry, new to css. This might be a simple fix. Any help would be greatly appreciated! Thank you!

Does it have to do with this code?

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

score 4 · Accepted Answer · answered May 14 '15 at 06:24

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

odedta · Answer 2 · 2015-05-14T06:14:57.293

You could create two triangles one on top of the other, one is green and one is white, that way you create the effect of a border, here is an example I just created to illustrate the way to your solution: 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;
}

score 3 · Answer 3 · answered May 14 '15 at 06:17

3

try adding the opacity

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

answered May 14 '15 at 06:17

vitally

377
6
17

demo http://jsfiddle.net/1Lexonbt/2/ – vitally May 14 '15 at 06:19

score 1 · Answer 4 · answered May 14 '15 at 06:04

1

I think, good way is add transparent png image with border.

answered May 14 '15 at 06:04

Arshid KV

9,631
3
35
36

CSS: Talk Bubble

4 Answers4