用 CSS 画一个三角形

在 WEB 页面中可以看到各种各样的三角形。实现方法有很多，可以直接贴一张 png，也可以使用svg来显示一个三角形，但这些方法不是太 low 就是太麻烦。在本篇文章中，使用 CSS 中的 border 来画三角形。主要介绍两种三角形的画法： 一种是纯色的三角形，另一种是有边框色的三角形。

纯色三角形

三角形的画法

1. 一个四个边都有 border 的 div, 如 示例1 所示。
2. 将高度和宽度设为0，剩下四个 border, 如 示例2 所示 ，可以尝试将高度和宽度逐渐减少，观察 div 的形状变化。
3. 再将 border-top 去掉,这样就把上面的区域裁掉了，在 示例2 中注释 border-top 查看效果。同样可以尝试将四条 border 分别去掉，观察 div 的形状变化。
4. 最后一步，去掉背景颜色或将其设为白色，再让左右两边的 border 透明，就得到了一个三角形。最终效果如 示例3 所示。

这里是画了向上的三角形，如果想要哪个方向的三角形，就设置它对应方向的 border, 其他两个方向的 border 颜色设为 transparent。

控制三角形的角度

上面画的三角形是直角三角形，而实际项目中用得比较多的是等边三角形或者类似于等边三角形，那么如何画出一个等边三角形呢？下面的试验都是以向上的三角形为例。

首先第一个试验，保持 order-left 和 border-right 的大小不变，让 border-bottom 不断变化，观察 div 形状的变化。效果如 示例4 所示。

可以看到顶部的角度不断变小，即三角形的底边不变，而高在不断变大。所以 border-bottom-width 是三角形的高。

然后做第二个试验，让 border-left 不断变化，其他两个 border 保持不变。 效果如 示例5 所示。

通过对比，可以看出 border-left 的宽度控制左边那条边的长度。由此想到，当右边的宽度为0时，则此时的三角形是直角三角形，且直角在右下角。

border-right-width 为0，也就是 border-right 可以不用设置，只写两行代码即可。其中 border-left 决定了向上的三角形底边直角边的长度，而 border-bottom 决定了向上的三角形右边直角边的长度。注意：这一点很重要。 同时切换四个 border 的设置可以控制直角边在不同的位置。

讲了这么多，让我们回到上面的问题，如何画一个等边三角形？首先让我们回顾一下等边三角形的基础知识：高是边的 sqrt(3)/2倍。而经过上面的分析，底边由 border-left 和 border-right 的宽度组合起来，所以如果高即 border-bottom-width 为40px,那么左边框和右边框的宽度为 40/sqrt(3),约等于23px。这样一个等边三角形就画好了，自己验证一下。

有边框色的三角形

这类三角形经常见于 tip 的提示框、聊天信息框等。方法很简单：首先画一个深色的三角形，然后再画一个同样大小的三角形覆盖它，错位几个像素，这样一个有边框色的三角形就完成了。代码及效果见 示例6

本篇文章主要是李银城的《高效前端 Web高效编程与优化实践》的读书笔记。详细及更多内容请翻阅此书。

转载于:https://juejin.im/post/5b5ede97f265da0fad0d14d2