在我们平常使用边框的时候往往是一个很窄的边框，所以在视觉效果上边框看似为直线。
方法/步骤
1
给一个小的盒子加一个很宽的边框，如下：
CSS代码：#triangle{ margin:0 auto; width: 20px; height: 20px; border-left: 173.2px solid red; border-top: 100px solid blue; border-right: 173.2px solid green; border-bottom: 100px solid black; }2
下面我们去掉盒子的宽度（都变为0），css如下：#triangle{ margin:0 auto; width: 0px; height: 0px; border-left: 173.2px solid red; border-top: 100px solid blue; border-right: 173.2px solid green; border-bottom: 100px solid black; }
3
由四个三角形组成的矩形就出来了。。。如果我们想要三角形只需要把其中的三个三角形（即边框）的颜色变为透明即可#triangle{ margin:0 auto; width: 0px; height: 0px; border-left: 173.2px solid transparent; border-top: 100px solid transparent; border-right: 173.2px solid green; border-bottom: 100px solid transparent; }
上一篇：如何用CSS制作一个三角形图形
下一篇：css如何制作一个三角形