持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第33天，点击查看活动详情
通常情况下，我们使用border都是设置一个颜色，这没什么特别的，一个红色边框的方形：
但是大家试过多个颜色是什么效果吗？我们尝试下：
喔呜！有点意思，我们把border拉大：
okk，用四个颜色试试：
嗯，顺序是上右下左，那么我把其中3个颜色变成透明不就是单独一个三角形了：
酷，这是一个倒三角形（朝下的），我要朝上的咋整呢？还记得刚刚说的顺序吗？上右下左，朝上的三角形就是刚刚绿色的那个（色值第三个）：
左右就不演示了，应该会了吧。
ok，那我们这里只有直角三角形呢，我想要一个正三角形怎么办？
why？为啥是86.6px?还有border-width设置2个值是什么意思？别急，咱们一步一步来：
我们先讲讲border-width设置2个值是什么意思：
我们用四个颜色就好说明了，border-width的值可以是一个，2个，3个或者4个，一个的话代表四条边框共用这一个宽度。2个的话第一个值代表上下边框的宽度，第二个值代表左右边框的宽度。3个和4个就不多说了，会css的这都是常识了。回到刚刚的话题，要画一个正三角形，我们需要求出它的高，正三角形的高等于 * 边长。边长是100，得出高是86.6px。50是左右两边边框的宽度，显然是50。
再来几个三角形熟悉下套路：
最后画个五角星结束吧：
