首先我們來看效果圖:
(影片教學推薦:css影片教學)
實作程式碼:
還是不理解的小夥伴可以看下面
1、設定div有一定寬高,四邊設定邊框
.triangle{ width: 50px; height: 50px; border-top: 200px solid #00a497; border-bottom: 200px solid #cc7eb1; border-left: 200px solid #165e83; border-right: 200px solid #c85179; }
上面程式碼設定div有一定寬高,四邊設定邊框時,效果如下:
2、設定div寬高為0,四邊設定邊框寬度為200px
.triangle{ width: 0px; height: 0px; border-top: 200px solid #00a497; border-bottom: 200px solid #cc7eb1; border-left: 200px solid #165e83; border-right: 200px solid #c85179; }
上面程式碼設定div寬高為0,四邊邊框設定不同顏色時,效果如下:
#(相關教學建議:CSS教學)
##3 、接下來div寬高仍為0,去掉border-top.triangle{ width: 0px; height: 0px; border-bottom: 200px solid #cc7eb1; border-left: 200px solid #165e83; border-right: 200px solid #c85179; }上面程式碼設定div寬高為0,只設定下邊框和左右邊框時,效果如下:
.triangle{ width: 0px; height: 0px; border-bottom: 200px solid #cc7eb1; border-left: 200px solid transparent; border-right: 200px solid transparent; }最終效果:
以上是如何利用css畫出一個三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章!