CSS和CSS3实现画出三角形元素

来源：图艺博知识网

这篇文章主要介绍了关于CSS和CSS3实现画出三角形元素，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

前端页面偶尔需要有三角形图标或者三角形样式，现在图标的三角形大多用字体图标去实现了，但是有些大的三角形模块还是需要前端运用CSS样式去画出来的，下面介绍各种角度的三角形css样式代码，希望能对大家带来帮助

1：triangle-up

#triangle-up {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
}

2：triangle-down

#triangle-down {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
}

3：triangle-left

#triangle-left {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-right: 100px solid red;
 border-bottom: 50px solid transparent;
}

4：triangle-right

#triangle-right {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-left: 100px solid red;
 border-bottom: 50px solid transparent;
}

5：:triangle-topleft

#triangle-topleft {
 width: 0;
 height: 0;
 border-top: 100px solid red;
 border-right: 100px solid transparent;
}

6：triangle-topright

#triangle-topright {
 width: 0;
 height: 0;
 border-top: 100px solid red;
 border-left: 100px solid transparent; 
}

7：triangle-bottomleft

#triangle-bottomleft {
 width: 0;
 height: 0;
 border-bottom: 100px solid red;
 border-right: 100px solid transparent;
}

8：triangle-bottomright :

#triangle-bottomright {
 width: 0;
 height: 0;
 border-bottom: 100px solid red;
 border-left: 100px solid transparent;
}