CSS3:不可思議的border屬性

來源:互聯網
上載者:User

標籤: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屬性

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: