border transparent实现三角符号

作者:

sjf

以前常见的三角符号我们都需要图片来带图,其实简单利用css的border属性和border属性中的transparent值就能完成。

以下方式可以兼容IE7+

例如:

1,

<div id="sj"></div>
#sj{ border:15px solid red; height:100px; width:100px;}

sjf2

 

 

2,

#sj{ border:15px solid red; height:100px; width:100px; border-left:15px solid transparent;border-right:15px solid transparent}

sjf3

 

 

3,

#sj{ border:15px solid red; height:0px; width:0px; border-left:15px solid transparent;border-right:15px solid transparent}

在将高度和宽度设置为0px就完成简单三角符号

sjf4

 

4,

#sj{ border:15px solid red; height:0px; width:0px; border-left:15px solid transparent;border-right:15px solid transparent; border-top:0;}

在选择使用的方向三角符号

sjf5