Pure CSS drawing triangles (various angles) _ Basic Tutorials

Our web page has an ever-changing style because of CSS. This seemingly simple style language is very flexible in use, as long as you play the creative will achieve a lot more than people can not imagine the effect. Especially with the widespread use of CSS3, more novel CSS works emerge.

To bring you today. CSS Triangle Rendering method

Copy Code code as follows:

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

Copy Code code as follows:

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

Copy Code code as follows:

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

Copy Code code as follows:

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

Copy Code code as follows:

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

Copy Code code as follows:

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

Copy Code code as follows:

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

Copy Code code as follows:

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