日期:2014-05-17  浏览次数:20582 次

Css中的小技巧

1. 三角形的制作   

方法一:

对于这样一个 <div id="boder_arrow"></div>,使用 #boder_arrow{border-left-width:20px;border-color:#ff6699 #ff3366 #cc0066 #990033;border-style:solid;width:0;height:0;lineheight:0},

效果如图:

当然,我们可以通过改变border-color的属性值(如transparent)来得到四个三角形中的任意一个,也可以通过改变各个方向的border-width(如border-top-width等)来改变三角形的角度。如:border-color: transparent #FF6699 transparent transparent;border-style: solid;border-width: 0 30px 20px 0;height: 0;line-height: 0;width: 0;

方法二:

通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持。