你真的了解css绘制三角形吗？

每日进步一点2024-03-08 17:53

原理

先上口诀：宽高为0，一边为0，两边透明。

元素的border的形成机制是：

在盒子四边由4个三角形 拼接而成，最先呈现的是每个三角形底部的内容，当border-width变大后，每个三角形的剩余部分会渐渐出现；

当盒子内容有宽高时，会遮住每个三角形底部之外的部分；

比如

css 复制代码

width: 40px;
height: 40px;
border-width: 50px;
border-style: solid;
border-color: red yellow green blue;

当border-width设置过小时，就是平时的场景（只看到每个三角形底部区域）：

css 复制代码

width: 40px;
height: 40px;
border-width: 1px;
border-style: solid;
border-color: red yellow green blue;

当盒子宽高设置为0后，每个三角形全部呈现：

css 复制代码

width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: red yellow green blue;

如果有一边不设置border-width，就只有三个三角形：

css 复制代码

width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: red yellow green #fff;

如果将上下两边的color设置为透明，不就是只看到一个三角形吗：

css 复制代码

width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: transparent yellow transparent #fff;

不难发现，不设置border-width那一边就是三角形的方向，三角形方向的方向的邻近两边需要设置透明。

实现口诀：宽高为0，一边为0，两边透明

css 复制代码

width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: transparent yellow transparent #fff;