Css3 creates various types of images (1) and css3 creates images

Css3 creates various types of images (1) and css3 creates images
1Square

 

#square { 
width: 100px; 
height: 100px; 
background: red; }

 

2. Rectangle

 

#rectangle { 
width: 200px; 
height: 100px; 
background: red; }

3. Circle

 

#circle {
 width: 100px; 
height: 100px; 
background: red; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; border-radius: 50px; }
 /* Cleaner, but slightly less support: use "50%" as value */

4. Oval

 

#oval { 
width: 200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; } 
/* Cleaner, but slightly less support: use "50%" as value */

5. Triangle Up

 

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

 

6 , Triangle Down

 

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

7 , Triangle Left

 

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

8 , Triangle Right

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

9 , Triangle Top Left

 

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

10 , Triangle Top Right

 

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

11 , Triangle Bottom Left

 

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

12 , Triangle Bottom Right

 

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

13 , Curved Tail Arrow

 

#curvedarrow { 
position: relative;
 width: 0;
 height: 0; border-top: 9px solid transparent;
 border-right: 9px solid red; 
-webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg); 
-ms-transform: rotate(10deg);
 -o-transform: rotate(10deg); 
} 
#curvedarrow:after { 
content: ""; 
position: absolute;
 border: 0 solid transparent; 
border-top: 3px solid red; 
border-radius: 20px 0 0 0; 
top: -12px; 
left: -9px; 
width: 12px; 
height: 12px; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); }

14 Trapezoid

 

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

15 , Parallelogram

 

#parallelogram { 
width: 150px; 
height: 100px; 
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg); 
background: red; }

16 , Star (6-points)

 

#star-six { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
position: relative; } 
#star-six:after { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
position: absolute; 
content: ""; 
top: 30px; 
left: -50px; }

17 , Star (5-points)

 

#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }

18 , Pentagon

 

#pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; } #pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red; }