網(LieHuo.Net)教程 今天,小編在博客園看到一篇關于文章的介紹,原來實現三角形不用圖片的,可以用css,你有沒有想過呢?讓我們一起來研究一下吧。
以下為引用的內容: .box{ width:0; height:0; border-bottom:50px #F00 solid; border-left:50px #03F solid; border-right: 50px #F90 solid; border-top:50px #6C0 solid; } |
如圖:
這樣就有上下左右四個三角形了,再把除了要用的三角外的其他3個三角(border)顏色設置為背景色就ok了。
上下和左右border-width不一致時可獲取非直角三角形。
提示:可修改后代碼再運行!