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.

Source: Internet
Author: User
Tags relative

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: ""
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.