CSS3：不可思議的border屬性

標籤：tran   logs   java   圖片   三角形   技術分享   技術   http   一些事   

在CSS中，其border屬性有很多的規則。對於一些事物，例如三角形或者其它的映像，我們仍然使用圖片代替。但是現在就不需要了，我們可以用CSS形成一些基本圖形，我分享了一些關於這方面的技巧。

1、正三角形：

.triangle_up{  height:0px; width:0px;  border-bottom:50px solid #006633;  border-left:50px solid transparent;  border-right:50px solid transparent;}

2、倒三角形：

.triangle_down{  height:0px; width:0px;  border-top:50px solid #006633;  border-left:50px solid transparent;  border-right:50px solid transparent;}

　　

3、左三角形

.triangle_left{  height:0px; width:0px;  border-left:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;  float:left;}

　　

4、右三角形

.triangle_right{  height:0px; width:0px; float:left;  border-right:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;}

 5、十字街效果

.crossSquare{  height:0px; width:0px;  border-right:50px solid blue;  border-top:50px solid gray;  border-bottom:50px solid red;  border-left:50px solid yellow;}

　

 

　

　　

　　

CSS3：不可思議的border屬性