CSS实现各种三角形效果

原理：设置框的高度和宽度为0px，用上下左右四条边框做出三角形效果

HTML：

<div id="d1"></div>

CSS：

1.锐角三角形，钝角三角形

width:0;
height:0;
border-top:0px solid transparent;
border-right:30px solid transparent;
border-bottom:100px solid red;
border-left:30px solid transparent;

效果：

　　

以上例子只是方向朝上，自己可以设置任何方向，例如朝右 就把左边框设置大点，上下边框稍小，右边框设置为0，除左边框外别的所有边框设置为透明，如下：

把下边框的长度设置为小于左右边框的长度，还可以变成钝角三角形奥！

设置左右边框不一样还可以成为不规则的三角形。

 

 

 

2.直角三角形

 把上边框设置为0后，如下：

把下边框设置为透明后，得到这样的效果：

最后把左边框设置为透明，就得到直角三角形了。

通过改变有边框的长度，还可以设置不同形状的直角三角形。

代码如下：

width:0;
height:0;
border-top:0px solid transparent;
border-right:150px solid blue;
border-bottom:50px solid transparent;
border-left:50px solid transparent;