首先我們來看效果圖：
（影片教學推薦：css影片教學）
實作程式碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/* css3绘制三角形 */
.triangle{
width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
height: 0px;
border-bottom: 200px solid #00a3af;
border-left: 200px solid transparent; /*transparent 表示透明*/
border-right: 200px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>還是不理解的小夥伴可以看下面
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;
}
.triangle{
width: 0px;
height: 0px;
border-bottom: 200px solid #cc7eb1;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
}
以上是如何利用css畫出一個三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章！
