你真的了解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;
相关推荐
yddddddy5 小时前
css的基本知识
前端·css
昔人'5 小时前
css `lh`单位
前端·css
2501_918126917 小时前
用html5写一个flappybird游戏
css·游戏·html5
孩子 你要相信光8 小时前
css之一个元素可以同时应用多个动画效果
前端·css
小刘鸭地下城10 小时前
优雅表格设计:CSS 美化技巧详解
css
小刘鸭地下城11 小时前
网页深色模式完整实现:从响应式设计到系统主题联动
css
恶猫13 小时前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
Hilaku14 小时前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架
Giant10015 小时前
0 基础也能懂的 Flex 布局教程:3 步搞定网页排版
css
Sherry00715 小时前
【译】掌握 Flexbox 的终极指南:从烤肉串到鸡尾酒香肠的布局哲学
css·面试·flexbox