CSS如何实现三角形？

这个技巧在前端圈里算是个经典的小把戏了，本质是利用了CSS边框的拼接原理。我们都知道，给一个盒子设置边框时，每条边框的连接处是斜切的。当你把这个盒子的宽和高都设为0，只保留边框，神奇的事情就发生了。

看看这段核心代码，你立马就明白了：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #f06;
}

这个例子会生成一个朝下的红色三角形。它的原理是：盒子的宽度和高度都是0，那么上下左右四条边框就会从四个中心点向四周延伸，最终交汇在一起。我们给border-bottom设置了颜色，而border-left和border-right是透明的，这样就只剩下底部边框形成的三角形区域可见了。

想要不同方向的三角形，思路是一样的，控制哪条边有颜色，相邻的两边透明即可。比如一个朝右的三角形：

.arrow-right {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 50px solid #333;
}

在HTML5的现代Web开发中，这个技巧非常实用，因为它不需要引入任何图片，纯代码实现，修改颜色和大小极其方便。你经常会看到它被用在工具提示框的小箭头、下拉菜单的指示标，或者一些装饰性元素上。

当然，现在你也可以用更直观的clip-path属性来裁剪出各种形状，包括三角形。但上面这个边框法兼容性最好，也最容易理解，是每个前端都应该掌握的基础图形绘制方法。