首先我們先看一下正常編寫邊框樣式：
.square {
display: inline-block;
border-style: solid;
border-width: 150px;
border-color: blue red purple green;
}
<div class="square"></div>
效果如下：
image.png
那么這時候饺蔑，大概知道如何去編寫一個三角形樣式了，代碼如下：
.triangle-top {
display: inline-block;
border-style: solid;
border-width: 150px;
border-color: transparent transparent purple transparent;
}
.triangle-right {
display: inline-block;
border-style: solid;
border-width: 150px;
border-color: transparent transparent transparent green;
}
.triangle-bottom {
display: inline-block;
border-style: solid;
border-width: 150px;
border-color: blue transparent transparent transparent;
}
.triangle-left {
display: inline-block;
border-style: solid;
border-width: 150px;
border-color: transparent red transparent transparent;
}
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>
效果如下：
image.png
我們就拿 .triangle-left 樣式來說：
display： 使用內聯(lián)塊元素
border-style： 邊框樣式為實線
border-width： 邊框寬度
border-color： 邊框顏色最易，表示上右下左的顏色心褐，transparent 是透明的意思
在仿真模式下支持 IE 8柴底，應用場景有下拉框蚯撩、表單提示等，當然咽弦，編寫這個三角形也不難徒蟆，就當做存?zhèn)€筆記好了，實現(xiàn)方式還可以用偽元素型型、畫布等段审，但兼容性可能并不是那么友好。
