首先观察测试如下代码:
1 | <style type="text/css"> |
按照均分法则,上、下、左、右四个边框是占比完全等分盒子四周的,要想等分四条边框就只有这样:
现在尝试把其中三条边框颜色设置成透明色:
1 | border-color: transparent transparent yellow transparent; |
再来观察:
现在的形状是梯形,很容易想到是因为现在盒子是有宽度和高度的,把宽高设成0:
1 | width: 0; |
就成了这个样子:
大功告成,这就是我们要得到的三角形了!