CSS and CSS3 implementations to draw a triangular element

This article mainly introduces the CSS and CSS3 implementation of the triangle elements, has a certain reference value, now share to everyone, the need for friends can refer to

The front-end page occasionally need to have triangle icon or triangle style, now the icon of the triangle mostly with the font icon to achieve, but some large triangular module still need to use the front-end CSS style to draw out, the following introduction of various angles of the triangle CSS style code, hope to bring help to everyone

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;}

The above is the entire content of this article, more relevant content please pay attention to topic.alibabacloud.com.