CSS三角形

.box {

width: 100px;

height: 100px;

border: 10px solid #666;

}

這個很明顯，呈現的是border為10px的一個正方形

Square-正方形

改變正方形的顏色，box的樣式

.box {

width: 100px;

height: 100px;

border: 10px solid #666;

border-left-color:red;

border-right-color:orange;

border-bottom-color:skyblue;

border-top-color:pink;

}

Square

改變box寬高為0，增加border寬度

.box {

width: 0px;

height: 0px;

border: 100px solid #666;

border-left-color:red;

border-right-color:orange;

border-bottom-color:skyblue;

border-top-color:pink;

}

Eight triangles

變成了四種顏色的三角形，那么用transparent讓上，右，左邊的三角形邊透明不就出現了我們想要的三角形了。

.box {

width: 0px;

height: 0px;

border: 100px solid #666;

border-left-color:transparent;

border-right-color:transparent;

border-bottom-color:skyblue;

border-top-color:transparent;

}

Triangle

當然還可以添加border-bottom-width: 200px;，三角形現在就變成了這樣

Triangle

gzh.jpg

每日分享前端技術知識，致力于幫助更多前端人翻過一座座山，踏過一個個坑。

總結

以上是生活随笔為你收集整理的html div画三角,css画三角形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。