在 WEB 页面中可以看到各种各样的三角形。实现方法有很多,可以直接贴一张 png,也可以使用svg来显示一个三角形,但这些方法不是太 low 就是太麻烦。在本篇文章中,使用 CSS 中的 border 来画三角形。主要介绍两种三角形的画法: 一种是纯色的三角形,另一种是有边框色的三角形。
纯色三角形
三角形的画法
- 一个四个边都有 border 的 div, 如 示例1 所示。
- 将高度和宽度设为0,剩下四个 border, 如 示例2 所示 ,可以尝试将高度和宽度逐渐减少,观察 div 的形状变化。
- 再将 border-top 去掉,这样就把上面的区域裁掉了,在 示例2 中注释 border-top 查看效果。同样可以尝试将四条 border 分别去掉,观察 div 的形状变化。
- 最后一步,去掉背景颜色或将其设为白色,再让左右两边的 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高效编程与优化实践》的读书笔记。详细及更多内容请翻阅此书。