CSS using Border Triangle drawing method

CSS triangle Drawing method, this inside the transparent is more important , has and does not affect very much;

Principle: This div is composed of 4 triangles, each triangle corresponding to a border, hide the other 3 border, you can get a triangle.

Copy CodeThe code is as follows:

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

/*border:50px solid transparent two different effects */
border-bottom:100px solid red;
}

Up and down to simple, direct border-back four mutual change, above are border:50px solid transparent can

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

CSS using Border Triangle drawing method