哈喽大家好今天我们来讲如何用css实现任意的三角形在日常开发中你是不是遇到过弹窗箭头、标签尖角、分割指示图标等场景都需要三角形而插入图片又太麻烦、兼容性差、加载慢。我整理了三种实现方法分别是1.边框法最常用的1.给盒子设置宽高都为02.给盒子四条边设置相同粗细不同的颜色3.浏览器边框交界处会自动切割成斜角四条边框各自形成三角形4.需要哪个方向的三角形就保留对应边颜色其余三边设为transparent透明style *{ /* 给盒子设置宽高都为0*/ margin: 0; padding: 0; } .box{ /* 给盒子四条边设置相同粗细不同的颜色 浏览器边框交界处会自动切割成斜角四条边框各自形成三角形 需要哪个方向的三角形就保留对应边颜色其余三边设为 transparent 透明 */ width: 0px; height: 0px; border: 50px solid; border-color: red green blue yellow; } /style body div classbox/div /body运行代码2.裁剪法1.clip-path: polygon() 多边形裁剪通过设置 3 个坐标点只保留三角形区域其余全部裁剪透明2.坐标规则坐标系元素左上角为 (0,0)向右 X 增大向下 Y 增大polygon(x1 y1, x2 y2, x3 y3) 三个点围成三角形style *{ margin: 0; padding: 0; } div{ margin: 50px auto; width: 200px; height: 200px; background-color: aqua; clip-path: polygon(0% 100%,50% 0%,100% 100%); } /style body div/div /body运行代码3. 通过background实现1.容器宽和高设置为02.定义两段对角线线性渐变前半透明、后半填充渐变色3.通过 background-size 统一控制三角尺寸style *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; margin: 50px auto; background: linear-gradient(45deg,red 50%,transparent 50%); } /style body div/div /body代码示例