CSS实现各种三角形效果

HTML：

CSS：

效果：

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

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

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

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

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

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

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

代码如下：