CSS Triangle

use CSS to make triangle

by Lien Z

HTML

<div id="triangle"></div>
<br/>
<div id="triangle2"></div>
<br/>
<div id="triangle3"></div>
<br/>
<div id="triangle4"></div>
<br/>

CSS

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

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

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