Pure CSS drawing of various graphics, including basic rectangles, circles, ellipses, triangles, polygons, but also a little more complex love, diamonds, yin and yang gossip, etc.

Today in Css-tricks saw an article, that article let me can not help but the heart of a shock, powerful CSS Ah, incredibly able to draw so many basic graphics. The graph includes basic rectangles, circles, ellipses, triangles, and polygons, as well as a slightly more complex love, diamonds, and yin-yang gossip. Of course there are some need to use the CSS3 properties, so when you open this article, I hope you use Firefox or Chrome, of course, ie can also see part of the. Well, let's take a look at how we use pure CSS to draw these graphs.

Original: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html

1, Square

Final effect:

The CSS code is as follows:

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

2. Rectangle

Final effect:

The CSS code is as follows:

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

3, round

Final effect:

The CSS code is as follows:

#circle {
    width:100px;
    height:100px;
    background:red;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
}

4. Ellipse

Final effect:

The CSS code is as follows:

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

5, the upper triangle

Final effect:

The CSS code is as follows:

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

6. Lower Triangle

Final effect:

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

7. Left Triangle

Final effect:

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

8. Right Triangle

Final effect:

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

9, the upper left triangle

Final effect:

The CSS code is as follows:

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

10, the upper right triangle

Final effect:

The CSS code is as follows:

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

11. Lower Left Triangle

Final effect:

The CSS code is as follows:

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

12. Lower Right Triangle

Final effect:

The CSS code is as follows:

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

13, Parallelogram

Final effect:

The CSS code is as follows:

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

14, Trapezoid

Final effect:

The CSS code is as follows:

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

15. Hexagonal Star

Final effect:

The CSS code is as follows:

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

16. Pentagram

Final effect:

The CSS code is as follows:

#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: "; }

17. The Pentagon

Final effect:

The CSS code is as follows:

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

18. Hexagon

Final effect:

The CSS code is as follows:

#hexagon {
    width:100px;
    height:55px;
    background:red;
    position:relative;
}
#hexagon: Before {
    content: "";
    Position:absolute;
    Top: -25px; 
    left:0;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:25px solid red;
}
#hexagon: After {
    content: "";
    Position:absolute;
    Bottom: -25px; 
    left:0;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:25px solid red;
}

19, octagonal

Final effect:

The CSS code is as follows:

#octagon {
    width:100px;
    height:100px;
    background:red;
    position:relative;
}
 
#octagon: Before {
    content: "";
    Position:absolute;
    top:0;
    left:0;    
    BORDER-BOTTOM:29PX solid red;
    BORDER-LEFT:29PX solid #eee;
    BORDER-RIGHT:29PX solid #eee;
    width:42px;
    height:0;
}
 
#octagon: After {
    content: "";
    Position:absolute;
    bottom:0;
    left:0;    
    BORDER-TOP:29PX solid red;
    BORDER-LEFT:29PX solid #eee;
    BORDER-RIGHT:29PX solid #eee;
    width:42px;
    height:0;
}

20. Love

Final effect:

The CSS code is as follows:

#heart {
    position:relative;
    width:100px;
    height:90px;
}
#heart: Before,
#heart: after {
    position:absolute;
    Content: ""