你真的了解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;
相关推荐
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
呆呆的心14 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
AA-代码批发V哥15 小时前
CSS之布局详解指南
css
拾光拾趣录18 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter18 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
FogLetter18 小时前
前端性能优化:深入理解回流与重绘
前端·css
浪裡遊20 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录21 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee1 天前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
zhanshuo1 天前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css