← 工具箱首页
📐 CSS 三角形生成
广告人之家
方向(箭头指向)
↖
↑
↗
←
→
↙
↓
↘
颜色
实现方式
border 边框法
clip-path 裁剪法
边宽 L
px
边宽 R
px(0 = 直角三角形)
高度
px
CSS 代码
复制代码
直接粘贴到元素样式即可使用;border 法需元素宽高为 0
原理说明
·
border 法
:把相邻两条边设为透明,只留目标方向的反边上色,元素本身宽高为 0,边框拼出三角形。优点:兼容一切浏览器。
·
clip-path 法
:用
polygon()
把一个正常宽高的块裁剪成三角形,支持渐变/图片填充和 hover 阴影,但 IE 不支持。
· 直角三角形:把 L 或 R 边宽设为 0;等腰三角形:L = R。