You can see it working Here: FIDDLE
.triangle-border.right:before {
border-color: rgba(0, 0, 0, 0) #EEEEEF;
border-width: 15px 0 13px 27px;
bottom: auto;
left: auto;
right: -28px;
top: 11px;
width: 0;
}
.triangle-border:before {
border-color: #EEEEEF rgba(0, 0, 0, 0);
border-style: solid;
content: "";
height: 0;
position: absolute;
}
.triangle-border.right:after {
border-color: rgba(0, 0, 0, 0) #FFFFFF;
border-width: 10px 0 11px 23px;
bottom: auto;
left: auto;
right: -23px;
top: 15px;
}
.triangle-border:after {
border-color: #FFFFFF rgba(0, 0, 0, 0);
border-style: solid;
content: "";
display: block;
position: absolute;
width: 0;
}
.triangle-border.right {
border: 3px solid #EEEEEF;
margin-right: 50px;
}
.triangle-border {
background: none repeat scroll 0 0 #FFFFFF;
color: #333333;
margin-left: 100px;
padding: 15px;
position: relative;
}
Just made it to fit with your current border width, but you can play with
.triangle-border.right:before
class to adjust it with any border size.
That's too much code for a single triangle , You can refer this link : Tutorial On Speech Bub