Shapes

by Annett

HTML

<div id="square"></div>
<br>
<div id="circle"></div>
<br>
<div id="oval"></div>
<br>
<div id="up-triangle"></div>
<br>
<div id="left-triangle"></div>
<br>
<div id="right-triangle"></div>

<br>
<div id="triangle-topright"></div>

<br>
<div id="triangle-bottomleft"></div>

<br>
<div id="triangle-bottomright"></div>

<br>
<div id="trapezium"></div>

<br>
<div id="diamond"></div>

<br>
<div id="rectangle"></div>

<br>
<div id="parallelogram"></div>

<br>
<div id="twelve-point-star"></div>

<br>
<div id="twelve-point-star"></div>

<br>
<div id="twelve-point-star"></div>

<br>
<div id="six-point-star"></div>

<br>
<div id="octagon"></div>

<br>
<div id="speech-bubble"></div>

<br>
<div id="egg"></div>

<br>
<div id="eq-triangle"></div>

<br>
<div id="pacman"></div>

<br>
<div id="biohazard"></div>

<br>
<div id="heart"></div>

<br>
<div id="infinity"></div>

CSS

#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}

#circle { 
   width: 140px;
   height: 140px;
   background: blue; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}



#oval {
   width: 200px; 
   height: 100px; 
   background: blue; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}



#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}



#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

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

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



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



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

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

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

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}



#diamond {
   width: 80px; 
   height: 80px; 
   background: blue;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform:...