<div class="header_img_hover"></div>
</div>
<div class="bkbubble left">
<p>这个不错</p>
</div>
</div>
(至于画三角形的方法稍后文章最后会总结一下)
样式:
CSS Code复制内容到剪贴板
.bkbubble.rightright p:before, .bkbubble.left p:before {
width: 0;
position: absolute;
top: 12px;
border-style: solid;
content: "";
}
.bkbubble.left {
text-align: rightright;
}
.bkbubble.rightright p:before {
left: -12px;
border-color: transparent #00bfff;
border-width: 0 12px 12px 0;
}
.bkbubble.left p:before {
rightright: -12px;
border-color: transparent #00bfff;
border-width: 0 0 12px 12px ;
}
三、边框式:
如果要求边框颜色和背景颜色不一样呢?上面的方法就不行了,因为用:before画三角形是利用border的原理,也就是说,在上面这种方式下,气泡边上的小三形是无法呈现两种颜色的,因为他只有一个border的颜色。那就要想办法凑出一个有边框的三角形了。
XML/HTML Code复制内容到剪贴板
<div class="jimi_lists lim_operator clearfix">
<div class="header_img jimi3 fl"></div>










