CSS实现三角形
时间：2023-03-30 14:09:14
CSS
最近的一个项目页面，有很多三角形图标。在不考虑IE兼容性的情况下，使用CSS来实现三角形。记录代码。1.实心三角形，透明实现(1)设置线宽为50px，div宽高为0
.triangle{width:0px;高度：0px；右边框：100px纯红色；左边框：100px纯蓝色；border-top:100px纯黄色；border-bottom:100px纯绿色；}(2)当我们只想要一个三角形时，只需要将其他边框颜色设置为透明即可。.triangle{宽度：0px；高度：0px；边框：100px实心透明；border-bottom:100px纯绿色；}(3)在(2)中我们生成了一个平面三角形，可以设置线的宽度，改变三角形的宽高。triangle{width:0px;高度：0px；边框：50px实心透明；border-bottom:100px纯绿色；宽度：10px；高度：10px；左边框：1px纯黑色；顶部边框：1px纯黑色；变换：旋转（45度）；}(2)使用伪类使两个三角形重叠。注意：如果三角形元素中有文本，可以使用before和after设置三角形叠加。优点：可以修改三角形的角度，.triangle{width:0px;高度：0px；边框：50px实心透明；底部边框：50px纯黑色；}.triangle::after{内容：'';宽度：0px；高度：0px；边框：49px实心透明；底部边框：49px纯白色；
