告别图片！三种 CSS 原生方案实现任意方向三角形
哈喽大家好！
今天我们来讲如何用css实现任意的三角形
在日常开发中你是不是遇到过弹窗箭头、标签尖角、分割指示图标等场景都需要三角形，而插入图片又太麻烦、兼容性差、加载慢。我整理了三种实现方法，分别是：
1.边框法（最常用的）
1.给盒子设置宽高都为0；
2.给盒子四条边设置相同粗细，不同的颜色
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 class="box"></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.容器宽和高设置为0
2.定义两段对角线线性渐变，前半透明、后半填充渐变色
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>代码示例：