CSS3-如何用CSS实现三角图形形状

Question

经常看到朋友只用CSS就制作出了各种形状的图形，我自己也经常在工作中制作块状的图形效果，比如下面：

#square {width: 100px; height: 100px; background: red; }
#rectangle {width: 100px; height: 100px; background: red;}
#circle {width:100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

Answer 1

我也是第一次知道还有这种方法……
似乎CSS的边框模型是一个外框、一个内框，然后上下左右的分界分别是从外框四个角到内框四个角连线。所以平时下边框会是一个梯形。而内框宽度为0的时候，就是个三角形了……
所以用同样的方法还可以画出梯形：

 width: 50px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;

Answer 2

想象一下一个实心框然后拆分成四个三角

Answer 3

感觉应该将线与线(border)的交叉点尽可能放大，通过border的不同size将这个点呈现出不同形状的三角形。