css如何做三角形

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

#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

#

#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 Top Left

#

#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 Bottom Left

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

##Triangle Bottom Right ############

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

###更多程式相關知識，請造訪：###程式設計影片###！ ！ ###

以上是css如何做三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章！