純css實現三角形
阿新 • • 發佈：2021-07-27
1. 首先，我們先來看看下面這段程式碼的效果，設定div塊的寬、高，以及四周的boder，其中，四個border顏色不同，得到的結果如下圖所示：
<style>
.triangle {
width: 100px;
height: 100px;
border-left: 100px solid green;
border-right: 100px solid blue;
border-bottom: 100px solid red;
border-top: 100px solid yellow;
}
</style>
<body>
<div class="triangle"></div>
</body>
2. 接下來，我們把div塊的寬高設為0，再看下效果：
.triangle {
width: 0px;
height: 0px;
border-left: 100px solid green;
border-right: 100px solid blue;
border-bottom: 100px solid red;
border-top: 100px solid yellow;
}
看到沒！！就是border重疊的部分，它從對角線處一分為二，顏色各一半，舉個例子，如下圖所示，黑色部分為倆border重疊的區域，那這個區域的顏色怎麼分配的呢？就是從對角線處一分為二，一部分設定為粉色（left 邊框的顏色），一部分設定為綠色（top邊框的顏色）。
3. 我們再來看一下不同數量的邊框組合組成的效果：
- 僅設定 left-border、right-border、bottom-border
- 設定 left、right、top
- 設定 top、bottom、left
- 設定 top、bottom、right
看到沒有！！！我們想要的各個三角形就出來了！！！
4. 怎麼得到三角形呢？根據自己的需求，把不同的方向的 border 設定為 transparent（透明）。舉例如下：
- 等腰三角形
.triangle { width: 0px; height: 0px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid red; }
- 想要高一點的等腰三角形怎麼辦嘞，那就把左右邊框設定的細一點，各為一半。
.triangle { width: 0px; height: 0px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid red; }
- 想要倒三角形怎麼辦呢？那就保留top-border，不要bottom-border
- 至於等邊三角形，則需要自己去計算，比如邊長度為 200， 那麼 left-border、right-border 寬度都設定為100，bottom-border 寬度設定為 100 * 根號3 （大家可以畫一下）
.triangle { width: 0px; height: 0px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 173.2px solid red; }
大家可以自己去試試，我就不再繼續舉例啦~