CSS之美（1）：這個三角形你pink了嗎？
阿新 • • 發佈：2020-12-21
CSS三角形原理
文章目錄
為什麼CSS能畫三角形
你真的瞭解border嗎？
先讓我們來畫個塊：
html程式碼：
<body>
<div class="triangle"></div>
</body>
css程式碼：
.triangle {
width: 500px;
height: 100px;
border: 10px pink solid;
}
如圖：
那border的四條邊是怎麼拼接的呢？我們嘗試改變一下顏色：
.triangle {
width: 500px;
height: 100px;
border: 10px solid;
border-color: pink blue;
}
從這裡我們可以看出：其實每個border都是一個梯形，那麼問題來了，當梯形的頂邊變成了0，是不是就是三角形了？
實現過程
大家熟悉盒子模型，梯形的上頂邊也就是div的width屬性，我們想到可以把div的高和寬設定為0，再依次給border顯示顏色：
.triangle {
width: 0px;
height: 0px;
border-top: 10px solid red; 
我們此時已經得到了四個三角形，但如果，我們只要其中一個或多個，而不是全部呢？css的透明屬性（transparent）可以幫我們解決。
.triangle {
width: 0px;
height: 0px;
border: 10px solid transparent; //控制的是三角形的邊
border-bottom: 10px solid pink; 
此時我們就可以得到所需方向的三角形啦。
總結
- CSS的三角形之美，主要是利用了邊框的拼接是斜邊的原理，讓我們可以通過將div的高和寬（梯形的上頂邊）設定為0，配合透明（transparent）來得到想要方位的三角形。
- 除了div.p標籤也能實現畫三角形，但需將font-size，和line-height設定為0.