你真的了解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;
相关推荐
前端老鹰10 小时前
CSS backdrop-filter:给元素背景添加模糊与色调的高级滤镜
前端·css·html
艾小码15 小时前
深入解析CSS伪类:从基础到高级实战指南
前端·css
鸢栀w16 小时前
前端css学习笔记7:各种居中布局&空白问题
前端·css·笔记·学习·尚硅谷网课
讨厌吃蛋黄酥1 天前
前端居中九种方式血泪史:面试官最爱问的送命题,我一次性整明白!
前端·css
意会1 天前
微信闪照小程序实现
前端·css·微信小程序
码码哈哈爱分享1 天前
Tauri 框架介绍
css·rust·vue·html
一枚前端小能手1 天前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
落雪小轩韩1 天前
网格布局 CSS Grid
前端·css
睡不着先生2 天前
`text-wrap: balance` 实战指南:让多行标题自动排版更优美
css
Wcy30765190662 天前
web前端第二次作业
前端·javascript·css