實測如何用 css 的 border 屬性繪製出三角形
今天要來實測用 css 的 border (邊框) 屬性繪製出向量的三角形圖案。
說到 border 屬性，就想到是矩形的邊框，我們先繪製一個長寬皆為50px、邊框粗細為 3px 的正方形，並將四邊分別以不同的顏色設定看看效果：
.t01 {
width: 50px;
height: 50px;
border: 3px solid;
border-color: #0099e5 #ff4c4c #34bf49 #fbb034;
}
接下來增加 border 的值為 25px，可以清楚看到四個邊接合的地方其實是斜角，也就是每一個方向的邊其實是梯形，而不是長方形。
.t02 {
width: 50px;
height: 50px;
border: 25px solid;
border-color: #0099e5 #ff4c4c #34bf49 #fbb034;
}
那麼試想一下，假如將中間空白的區域( 長寬各為 50px )拿掉的話，這張圖會變成怎麼樣？我們將 width 和 height 的值改為 0 看看結果：
.t03 {
width: 0;
height: 0;
border: 25px solid;
border-color: #0099e5 #ff4c4c #34bf49 #fbb034;
}
果然，和預想中的一樣，變成一個由四個三角形組成的正方形了。
所以假如我們需要用到一個箭頭向右邊的三角形，只需要把上、右、下三邊的 border 顏色設定為 transparent (透明)，就可以了：
.t04 {
width: 0;
height: 0;
border: 25px solid;
border-color: transparent transparent transparent #fbb034;
}
這個可以拿來做按鈕上的icon，我們試試看以虛擬元素將繪製的三角形加入至按鈕後面：
.btn-more {
background-color: #7d3f98;
color: #fff;
display: block;
padding: 8px 25px;
width: 60px;
text-align: center;
text-decoration: none;
border-radius: 30px;
font-size: 16px;
position: relative;
}.btn-more:hover,
.btn-more:active,
.btn-more:focus {
background-color: #511378;
}.btn-more:after {
content:””;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #fff;
position: absolute;
right: 15%;
top: calc( 50% — 6px );
}
想控制三角形的長寬的話，只要改變四個邊框的粗細( border-width分別設定)就可以了。這邊提供一個可以 Demo 繪製出來三角形的網站作為參考，若要繪製比較複雜的三角形時可以直接使用這個：CSS三角形產生器
最後我們再來做一個繪製三角形的應用，試試看繪製一個對話氣泡框的效果，把一個向下的三角形以虛擬元素的方式加在圓角矩形的後面：
.dialog {
color: #444;
display: block;
background-color: #ecf5ff;
border: 2px solid;
border-color: #c4e1ff;
border-radius: 10px;
width: 180px;
line-height: 60px;
position: relative;
text-align:center;
}.dialog:before,
.dialog:after {
border: solid transparent;
content: “”;
width: 0;
height: 0;
position: absolute;
}.dialog:after {
border-width: 10px 10px 0 10px;
border-top-color: #ecf5ff; /*淺色*/
top: 60px;
right: 20px;
}.dialog:before {
border-width: 13px 13px 0 13px;
border-top-color: #c4e1ff; /*深色*/
position: absolute;
top: 60px;
right: 17px;
}
這邊要特別注意的是，底下的三角形，因為要繪製出有邊線的效果，其實是以兩個大小不同的三角形(淺色較小在上層、深色較大在下層)重疊起來所做出的效果，所以虛擬元素需要加入兩個( :before 和 :after )
※ 註：虛擬元素 :after 在 :before 的上層，也可以設定 z-index 來指定上下層關係最後附上此次練習的原始碼：→ 點擊查看CodePen
此外，用 CSS 的 clip-path 這個屬性可以繪製出更多不同的幾何圖形，有興趣的話可以先試試看這個網站：Clippy — CSS clip-path maker
※ IE、Edge 不支援 clip-path
