Css中的小技艺

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的浏览器支持。