css 三角形样式编写

首先我们先看一下正常编写边框样式：

.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，应用场景有下拉框、表单提示等，当然，编写这个三角形也不难，就当做存个笔记好了，实现方式还可以用伪元素、画布等，但兼容性可能并不是那么友好。