CSS实现的三角形

看着喜欢，就试着自己做一个了。

原理

主要是利用border来实现。 看上图的的正方形的代码

<div style="width:0; height:0; border:40px solid transparent;border-top-color:green;border-left-color:red;border-right-color:blue;border-bottom-color:yellow;"></div>

分别给四边的border设了四种颜色。也许你看到这里就知道了，取一部分不就是三角形了嘛。没错，把其他三边设为透明即可。

<style type="text/css">
.triangle_contianer{ position:relative; background:#FFE4CA; color:#000; border:4px solid #F90; padding:5px;}
.triangle_border{ width:0; position:absolute; left:50%;bottom:-24px; margin-left:-12px; border:12px solid transparent;border-top-color:#F90;}
.triangle{ position:absolute; left:50%;bottom:-12px; margin-left:-6px; border:6px solid transparent;border-top-color:#FFE4CA;}
</style>
<span class="triangle_contianer">
Fatkun,这是提示的内容啊<span class="triangle_border"></span><span class="triangle"></span>
</span>

其实这里用了一个span假装作为了三角形边框(triangle_border)，其实也是一个三角形border。 另外里面的边框宽度改变的话，还要相应的改变margin-left等一些值。