使用 border 属性制作三角形

问题描述：

• 有时候我们需要使用到三角形图标，如果直接使用SVG图标，会增大项目体积（虽然不是很大），而且使用起来也比较繁琐
• 如果直接使用 CSS 制作，使用起来会更加方便

解决方案：

• 添加一个空的 div 标签，然后使用 border 属性进行绘制
• 首先将该标签的宽高置为 0
• 然后设置三角形宽度 border-width
• 再然后设置三角形颜色 border-color，并将其它三个方向设置为透明（transparent）
• 最后设置 border-style 为实线（solid）

<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>

// 向上的三角形
.top {
  width: 0;
  height: 0;
  border-width: 40px;
  border-color: transparent transparent red transparent;
  border-style: solid;
}
// 向右的三角形
.right {
  width: 0;
  height: 0;
  border-width: 40px;
  border-color: transparent transparent transparent red;
  border-style: solid;
}
// 向下的三角形
.bottom {
  width: 0;
  height: 0;
  border-width: 40px;
  border-color: red transparent transparent transparent;
  border-style: solid;
}
// 向左的三角形
.left {
  width: 0;
  height: 0;
  border-width: 40px;
  border-color: transparent red transparent transparent;
  border-style: solid;
}