前端实战：小实例4——三角形图标绘制

前言

给一个块元素或行内块元素设置一定的宽度、高度及四条不同颜色的边框时，每个颜色对应的边框形状为梯形（如下图左），将元素的宽高设为 0 后，边框形状变为三角形（如下图右）。

实现思路

1. 设置一个边框颜色不同且边框形状为三角形的正方形；
2. 保留其中一个三角形的背景色，将其余三个的背景色改为其所覆盖的元素的背景色或改为透明色；
   透明色改变方法：一是 rgba（0,0,0,0）；二是 transparent；
3. 将绘制好的小三角形通过绝对定位，向反方向移动一半宽度位置，使其放置在中心位置；
   与文本一同放置时，文本不直接居中，通过 text-indent 属性进行文本缩进，小三角放在 span 标签中，将该标签设为行内块元素即可

HTML + CSS

<!