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

原理

先上口诀:宽高为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;
相关推荐
黎金安3 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=4 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程5 小时前
【前端基础】CSS基础
前端·css
Justinc.6 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge6 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_7 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189117 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
我要洋人死10 小时前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚11121 小时前
css实现div被图片撑开
前端·css
@蒙面大虾21 小时前
CSS综合练习——懒羊羊网页设计
前端·css