Pure CSS drawing triangles (various angles)

Pure CSS Draw triangle (various angles) CSS triangle Drawing method, learned this, the other is simple.

Our web page has a changing style because of CSS. This seemingly simple style language is very flexible to use, as long as you are creative you can achieve a lot more than people think. Especially with the widespread use of CSS3, more novel CSS works emerge.

Today brings you CSS triangle rendering method

Copy CodeThe code is as follows:
#triangle-up {
width:0;
height:0;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-bottom:100px solid red;
}

Copy CodeThe code is as follows:
#triangle-down {
width:0;
height:0;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-top:100px solid red;
}

Copy CodeThe code is as follows:
#triangle-left {
width:0;
height:0;
border-top:50px solid Transparent;
border-right:100px solid red;
border-bottom:50px solid Transparent;
}

Copy CodeThe code is as follows:
#triangle-right {
width:0;
height:0;
border-top:50px solid Transparent;
border-left:100px solid red;
border-bottom:50px solid Transparent;
}

Copy CodeThe code is as follows:
#triangle-topleft {
width:0;
height:0;
border-top:100px solid red;
border-right:100px solid Transparent;
}

Copy CodeThe code is as follows:
#triangle-topright {
width:0;
height:0;
border-top:100px solid red;
border-left:100px solid Transparent;
}

Copy CodeThe code is as follows:
#triangle-bottomleft {
width:0;
height:0;
border-bottom:100px solid red;
border-right:100px solid Transparent;
}

Copy CodeThe code is as follows:

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

Pure CSS drawing triangles (various angles)