border实现三角形

1. 写一个我们最熟悉的 border 应用 ```css .box { width: 100px; height: 100px; border: 3px solid; border-color: #1b93fb #1bfb24 #efad48 #ef4848; }

效果如下: ![image.png](https://cdn.nlark.com/yuque/0/2021/png/338495/1636989675361-f5870970-389a-49fd-a03c-dcdcc9e0bf72.png#clientId=u41df0097-60eb-4&from=paste&height=105&id=ub054ab22&margin=%5Bobject%20Object%5D&name=image.png&originHeight=164&originWidth=175&originalType=binary&ratio=1&size=1530&status=done&style=none&taskId=u35b25796-ba4e-4d9b-b0da-e1edb72068e&width=112.5)
1. 接下来,我们将 border 值增大
```css
.box {
  width: 100px;
  height: 100px;
  border: 50px solid;
  border-color: #1b93fb #1bfb24 #efad48 #ef4848;
}

很容易发现, border 渲染并不是正方形, 而是梯形的

1. 在增大 border 的基础下, 此时我们将盒子宽高变成 0,会产生什么效果呢! ```css .box { width: 0px; height: 0px; border: 50px solid; border-color: #1b93fb #1bfb24 #efad48 #ef4848; }

![image.png](https://cdn.nlark.com/yuque/0/2021/png/338495/1636989722348-98a4400b-ef40-4f75-92a4-7fd2f0fe7d10.png#clientId=u41df0097-60eb-4&from=paste&height=155&id=u1ff2152a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=187&originWidth=210&originalType=binary&ratio=1&size=3729&status=done&style=none&taskId=uce35004a-4448-4e14-aefe-5d5e2d974a2&width=174)<br />四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;
1. 设置透明, 隐藏其中三个三角形
```css
.box {
  width: 0px;
  height: 0px;
  border: 50px solid;
  border-color: transparent transparent transparent #ef4848;
}

三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的