首先我们先看一下正常编写边框样式：
.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： 使用内联块元素
border-style： 边框样式为实线
border-width： 边框宽度
border-color： 边框颜色，表示上右下左的颜色，transparent 是透明的意思
在仿真模式下支持 IE 8，应用场景有下拉框、表单提示等，当然，编写这个三角形也不难，就当做存个笔记好了，实现方式还可以用伪元素、画布等，但兼容性可能并不是那么友好。
