Basic graphics for pure css (rectangle, circle, triangle, polygon, love, gossip, etc.)

Original: http://www.cnblogs.com/jscode/archive/2012/10/19/2730905.html

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, here's a look at how we use pure CSS to draw these graphics, if you also feel very shocked, recommend to your friends.

1, Square

Final effect:

The CSS code is as follows:

1 #square {2     width:100px;3     height:100px;4     background:red;5}

2. Rectangle

Final effect:

The CSS code is as follows:

1 #rectangle {2     width:200px;3     height:100px;4     background:red;5}

3, round

Final effect:

The CSS code is as follows:

1 #circle {2     width:100px;3     height:100px;4     background:red;5     -moz-border-radius:50px;6     - Webkit-border-radius:50px;7     Border-radius:50px;8}

4. Ellipse

Final effect:

The CSS code is as follows:

1 #oval {2     width:200px;3     height:100px;4     background:red;5     -moz-border-radius:100px/50px;6     - Webkit-border-radius:100px/50px;7     Border-radius:100px/50px;8}

5, the upper triangle

Final effect:

The CSS code is as follows:

1 #triangle-up {2     width:0;3     height:0;4     border-left:50px solid transparent;5     border-right:50px Solid transparent;6     border-bottom:100px solid Red;7}

6. Lower Triangle

Final effect:

The CSS code is as follows:

1 #triangle-down {2     width:0;3     height:0;4     border-left:50px solid transparent;5     border-right:50px Solid transparent;6     border-top:100px solid Red;7}

7. Left Triangle

Final effect:

The CSS code is as follows:

1 #triangle-left {2     width:0;3     height:0;4     border-top:50px solid transparent;5     border-right:100px Solid red;6     border-bottom:50px solid Transparent;7}

8. Right Triangle

Final effect:

The CSS code is as follows:

1 #triangle-right {2     width:0;3     height:0;4     border-top:50px solid transparent;5     Border-left: 100px solid red;6     border-bottom:50px solid Transparent;7}

9, the upper left triangle

Final effect:

The CSS code is as follows:

1 #triangle-topleft {2     width:0;3     height:0;4     border-top:100px solid red;5     border-right:100px Solid transparent;          6}

10, the upper right triangle

Final effect:

The CSS code is as follows:

1 #triangle-topright {2     width:0;3     height:0;4     border-top:100px solid red;5     border-left:100px Solid Transparent;6      7}

11. Lower Left Triangle

Final effect:

The CSS code is as follows:

1 #triangle-bottomleft {2     width:0;3     height:0;4     border-bottom:100px solid red;5     border-right: 100px solid transparent;  6}

12. Lower Right Triangle

Final effect:

The CSS code is as follows:

1 #triangle-bottomright {2     width:0;3     height:0;4     border-bottom:100px solid red;5     Border-left: 100px Solid Transparent;6}

13, Parallelogram

Final effect:

The CSS code is as follows:

1 #parallelogram {2     width:150px;3     height:100px;4     margin-left:20px;5     -webkit-transform:skew (20deg ); 6     -moz-transform:skew (20deg); 7     -o-transform:skew (20deg); 8     Background:red;9}

14, Trapezoid

Final effect:

The CSS code is as follows:

1 #trapezoid {2     border-bottom:100px solid red;3     border-left:50px solid transparent;4     border-right:50px Solid transparent;5     height:0;6     width:100px;7}

15. Hexagonal Star

Final effect:

The CSS code is as follows:

1 #star-six {2     width:0; 3     height:0; 4     border-left:50px solid transparent; 5     border-right:50px Solid T Ransparent; 6     border-bottom:100px solid red; 7     position:relative; 8} 9 #star-six:after {     width:0;11     height:0;12     border-left:50px solid transparent;13     border-right:50px solid transparent;14     border-top:100px Solid red;15     position:absolute;16     content: "";     top:30px;18 left     : -50px;19}

16. Pentagram

Final effect:

The CSS code is as follows:

 1 #star-five {2 margin:50px 0; 3 position:relative; 4 display:block; 5 color:red; 6 width:0px; 7 height:0px; 8 border-right:100px solid transparent;     9 border-bottom:70px Solid red;10 border-left:100px solid transparent;11-moz-transform:rotate (35deg); 12 -webkit-transform:rotate (35deg); 13-ms-transform:rotate (35deg); 14-o-transform:rotate (35deg); 15}16 #star-five:before {border-bottom:80px solid red;18 border-left:30px solid transparent;19 border-right:30px Solid transparent;20 position:absolute;21 height:0;22 width:0;23 Top: -45px;24 Left: -65px;25 display : block;26 content: "; 27-webkit-transform:rotate ( -35deg); 28-moz-transform:rotate ( -35deg); 29-ms-transf Orm:rotate ( -35deg), 30-o-transform:rotate ( -35deg),}33 #star-five:after {position:absolute;3 5 display:block;36 color:red;37 top:3px;38 left: -105px;39 width:0px;height:0px;41 border-right:100px solid transparent;42 border-bottom:70px solid red;43 border-left:100px     Solid Transparent;44-webkit-transform:rotate ( -70DEG); 45-moz-transform:rotate ( -70deg); 46-ms-transform: Rotate ( -70deg); 47-o-transform:rotate ( -70deg); content: '; 49}

17. The Pentagon

Final effect:

The CSS code is as follows:

1 #pentagon {2     position:relative; 3     width:54px; 4     border-width:50px 18px 0; 5     border-style:solid; 6
   border-color:red Transparent; 7} 8 #pentagon: Before {9     content: "";     position:absolute;11     height:0;12     width:0;13     top: -85px; Left     : -18px;15     border-width:0 45px 35px;16     border-style:solid;17     border-color:transparent Transparent red;18}

18. Hexagon

Final effect:

The CSS code is as follows:

1 #hexagon {2     width:100px; 3     height:55px; 4     background:red; 5     position:relative; 6} 7 #hexagon: befor e {8     content: ""; 9     position:absolute;10     top: -25px;11     left:0;12     width:0;13     height:0;14     border-left:50px Solid transparent;15     border-right:50px solid transparent;16     border-bottom:25px solid red;17}18 #hexagon: After {     content: "";     position:absolute;21     bottom: -25px;22     left:0;23     width:0;24     height:0;25     border-left:50px solid transparent;26     border-right:50px solid transparent;27     border-top:25px Solid Red;28}

19, octagonal

Final effect:

The CSS code is as follows:

1 #octagon {2     width:100px; 3     height:100px; 4     background:red; 5     position:relative; 6} 7   8 #octago N:before {9     content: "";     position:absolute;11     top:0;12     left:0;     border-bottom:29px solid red;14     border-left:29px solid #eee;     border-right:29px solid #eee; 16     width:42px;17     height:0;18}19  #octagon: After {     content: "";     position:absolute;23< C18/>bottom:0;24     left:0;     border-top:29px solid red;26     border-left:29px solid #eee;     border-right:29px solid #eee;     width:42px;29     Height:0;30}

20. Love

Final effect:

The CSS code is as follows:

 1 #heart {2 position:relative; 3 width:100px; 4 height:90px; 5} 6 #heart: Before, 7 #heart: after {8 Position:absolute; 9 content: ""; left:50px;11 top:0;12 width:50px;13 height:80px;14 Background:red;15-mo z-border-radius:50px 50px 0 0;16 border-radius:50px 50px 0 0;17-webkit-transform:rotate ( -45deg); 18-moz             -transform:rotate ( -45deg); 19-ms-transform:rotate ( -45deg); 20-o-transform:rotate ( -45deg); 21 Transform:rotate ( -45deg); 22-webkit-transform-origin:0 100%;23-moz-transform-origin:0 100%;24-ms -transform-origin:0 100%;25-o-transform-origin:0 100%;26 transform-origin:0 100%;27}28 #heart: AF ter {left:0;30-webkit-transform:rotate (45deg); 31-moz-transform:rotate (45deg); 32-MS-TRANSFO Rm:rotate (45deg); 33-o-transform:rotate (45deg); transform:rotate (45deg); 35-webkit-transform -origin:100% 100%;36-moz-transform-origin:100% 100%;37-ms-transform-origin:100% 100%;38-o-transf orm-origin:100% 100%;39 transform-origin:100% 100%;40}

21, infinity Symbol

Final effect:

The CSS code is as follows:

1 #infinity {2     position:relative; 3     width:212px; 4     height:100px; 5} 6   7 #infinity: Before, 8 #infinity : After {9     content: "";     position:absolute;11     top:0;12     left:0;13     width:60px;14     Height: 60px;     border:20px solid red;16     -moz-border-radius:50px 50px 0 50px;17          border-radius:50px 50px 0 50px;18
   -webkit-transform:rotate ( -45deg);        -moz-transform:rotate ( -45deg);         -ms-transform:rotate ( -45DEG) ;          -o-transform:rotate ( -45deg);             transform:rotate ( -45deg);}24  #infinity: after {     left:auto;27     right:0;28     -moz-border-radius:50px 50px 50px 0;29          border-radius:50px 50px 50px 0;30     -webkit-transform:rotate (45deg);        -moz-transform:rotate (45deg);         -ms-transform:rotate (45DEG) ;          -o-transform:rotate (45deg);             transform:rotate (45DEG); 35}

22. Eggs

Final effect

The CSS code is as follows:

#egg {   display:block;   width:126px;   height:180px;   background-color:red;   -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;   border-radius:50%   50%  50%  50%  /60%   60%   40%  40%;}

23, eating cute (Pac-man)

Final effect:

The CSS code is as follows:

1 #pacman {2   width:0px; 3   height:0px; 4   border-right:60px solid transparent; 5   border-top:60px so Lid red; 6   border-left:60px solid red; 7   border-bottom:60px solid red; 8   border-top-left-radius:60px; 9   border-top-right-radius:60px;10   border-bottom-left-radius:60px;11   border-bottom-right-radius:60px;12 }

24. Prompt dialog box

The CSS code is as follows:

1 #talkbubble {2    width:120px; 3    height:80px; 4    background:red; 5    position:relative; 6    -moz-borde R-radius:    10px; 7    -webkit-border-radius:10px; 8    Border-radius:         10px; 9}10 #talkbubble: before {11    content: "";    position:absolute;13    right:100%;14    top:26px;15    width:0;16    height:0 ;    border-top:13px Solid transparent;18    border-right:26px solid red;19    border-bottom:13px Solid TRANSPARENT;20}

25, 12 Point Star

Final effect:

The CSS code is as follows:

1 #burst -12 {2     background:red; 3     width:80px; 4     height:80px; 5     position:relative; 6     Text-align:ce Nter 7} 8 #burst -12:before, #burst -12:after {9     content: "";     position:absolute;11     top:0;12     Left:0;13
   height:80px;14     width:80px;15     background:red;16}17 #burst -12:before {-webkit-transform:rotate     (30deg),        -moz-transform:rotate (30deg),         -ms-transform:rotate (30deg),          -o-transform:rotate ( 30DEG)             transform:rotate (30deg),}24 #burst -12:after {     -webkit-transform:rotate (60deg);        Moz-transform:rotate (60deg);         -ms-transform:rotate (60deg);          -o-transform:rotate (60deg);             Transform:rotate (60DEG); 30}

26, 8 Point Star

Final effect:

The CSS code is as follows:

1 #burst-8 {2     background:red; 3     width:80px; 4     height:80px; 5     position:relative; 6     Text-align:cen ter 7     -webkit-transform:rotate (20deg), 8        -moz-transform:rotate (20deg), 9         -ms-transform:rotate (20deg), 10          -o-transform:rotate (20eg),             transform:rotate (20deg),}13 #burst -8:before {     content: "";     position:absolute;16     top:0;17     left:0;18     height:80px;19     width:80px;20     background:red;     -webkit-transform:rotate (135deg);        -moz-transform:rotate (135deg);         -ms-transform:rotate ( 135DEG);          -o-transform:rotate (135deg);             transform:rotate (135DEG); 26}

27. Diamond

Final effect:

The CSS code is as follows:

1 #cut-diamond {2     border-style:solid; 3     border-color:transparent transparent red transparent; 4     border-width:0 25px 25px 25px; 5     height:0; 6     width:50px; 7     position:relative; 8     margin:20px 0 50px 0; 9}10 #cut-diamond:after {11
   content: "";     position:absolute;13     top:25px;14 left     : -25px;15     width:0;16     height:0;17     border-style:solid;18     border-color:red Transparent transparent transparent;19     border-width:70px 50px 0 50px;20}

28, the yin and yang gossip (domineering this)

Final effect:

The CSS code is as follows:

1 #yin-yang {2     width:96px; 3     height:48px; 4     background: #eee; 5     border-color:red; 6     Border-style: Solid 7     border-width:2px 2px 50px 2px 8     border-radius:100% 9     position:relative;10}11  #yin-yang:before {     content: "";     position:absolute;15     top:50%;16     left:0;17     background: #eee;     border:18px solid red;19     border-radius:100%;20     width:12px;21     height:12px;22}23  #yin-yang: After {     content: "";     position:absolute;27     top:50%;28     left:50%;29     background:red;30     border:18px solid #eee;     border-radius:100%;32     width:12px;33     height:12px;34}

Well, that's it, there are 28 of them, and I think there are a few more sharp ones behind. The source of the code is css-tricks. By the Green Rattan House blog Finishing, reproduced please keep the original link:

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

Basic graphics for pure css (rectangle, circle, triangle, polygon, love, gossip, etc.)