← 工具箱首页
📐 CSS 三角形生成
广告人之家
方向(箭头指向)
px
px(0 = 直角三角形)
px
CSS 代码
直接粘贴到元素样式即可使用;border 法需元素宽高为 0

    
原理说明
· border 法:把相邻两条边设为透明,只留目标方向的反边上色,元素本身宽高为 0,边框拼出三角形。优点:兼容一切浏览器。
· clip-path 法:用 polygon() 把一个正常宽高的块裁剪成三角形,支持渐变/图片填充和 hover 阴影,但 IE 不支持。
· 直角三角形:把 L 或 R 边宽设为 0;等腰三角形:L = R。