css做三角形的方法：先建立一個div元素，設定div的width和height為0，只用邊框寬來填充，邊框樣式設定為實線「solid」；然後頂部邊框設定顏色，剩下的三個邊框的顏色設定為透明“transparent”值即可。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
使用CSS畫三角形
#第一步
首先，先來一個div，然後給這個div加一層border，並且給上下左右border分別加上不同顏色，以便觀察，程式碼和效果如下：
.trangle{
width: 100px;
height: 100px;
border: 100px solid #000;
border-top-color: red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
<div class="trangle"></div>
第二步
接著，將這個div的width變成0，我們再來看看效果。可以看到，由於div的寬度變成了0，左右兩邊的border「吸」在了一起，同時上下的border變成了三角形，好像快要完成了，別急，再看看第三步。
.trangle{
width: 0px;
height: 100px;
border: 100px solid #000;
border-top-color: red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
<div class="trangle"></div>
第三步
#然後，再將這個div的height變成0，效果如下。我們可以看到，由於div的高度也變成了0，上下兩個border也「吸」在了一起，同時上下的border也變成了三角形，到現在為止，四個三角形已經出來了
.trangle{
width: 0px;
height: 0px;
border: 100px solid #000;
border-top-color: red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
<div class="trangle"></div>
步驟
最後，就看你想要哪個角啦，想要哪個角就把其餘三個border設為透明即可。例如，我想要最上面的三角形，那就把下、左、右設為透明，程式碼和效果如下：
.trangle{
width: 0px;
height: 0px;
border: 100px solid #000;
border-top-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
<div class="trangle"></div>
簡化程式碼
其實，我們不需要把四個border都設定一遍，只需設定你想要畫的三角形所涉及到的三條邊的border即可。以上步的畫最上面的三角形為例，只需設定上、左、右三條邊即可，並且要上三角形，就把左右border設為透明，代碼和效果如下：
.trangle{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
<div class="trangle"></div>（學習影片分享：css影片教學）
CSS 實作繪製各種三角形（各種角度）
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}Triangle Down
#
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
##triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}登入後複製
Triangle Right
#
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
##triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}登入後複製
Triangle Top Right
#
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}以上是css如何做三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章！
