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:
Copy the code code as follows:
#square {
width:100px;
height:100px;
background:red;
}
2. Rectangle
Final effect:
The CSS code is as follows:
Copy the code code as follows:
#rectangle {
width:200px;
height:100px;
background:red;
}
3, round
Final effect:
The CSS code is as follows:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code 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:
Copy the code code as follows:
#heart {
position:relative;
width:100px;
height:90px;
}
#heart: Before,
#heart: After {
Position:absolute;
Content: "";
left:50px;
top:0;
width:50px;
height:80px;
background:red;
-moz-border-radius:50px 50px 0 0;
border-radius:50px 50px 0 0;
-webkit-transform:rotate ( -45DEG);
-moz-transform:rotate ( -45DEG);
-ms-transform:rotate ( -45DEG);
-o-transform:rotate ( -45DEG);
Transform:rotate ( -45DEG);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
Transform-origin:0 100%;
}
#heart: After {
left:0;
-webkit-transform:rotate (45DEG);
-moz-transform:rotate (45DEG);
-ms-transform:rotate (45DEG);
-o-transform:rotate (45DEG);
Transform:rotate (45DEG);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}
21, infinity Symbol
Final effect:
The CSS code is as follows:
Copy the code code as follows:
#infinity {
position:relative;
width:212px;
height:100px;
}
#infinity: Before,
#infinity: After {
Content: "";
Position:absolute;
top:0;
left:0;
width:60px;
height:60px;
border:20px solid red;
-moz-border-radius:50px 50px 0 50px;
border-radius:50px 50px 0 50px;
-webkit-transform:rotate ( -45DEG);
-moz-transform:rotate ( -45DEG);
-ms-transform:rotate ( -45DEG);
-o-transform:rotate ( -45DEG);
Transform:rotate ( -45DEG);
}
#infinity: After {
Left:auto;
right:0;
-moz-border-radius:50px 50px 50px 0;
border-radius:50px 50px 50px 0;
-webkit-transform:rotate (45DEG);
-moz-transform:rotate (45DEG);
-ms-transform:rotate (45DEG);
-o-transform:rotate (45DEG);
Transform:rotate (45DEG);
}
22. Eggs
Final effect
The CSS code is as follows:
Copy the code code as follows:
#egg {
Display:block;
width:126px;
height:180px;
-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:
Copy the code code as follows:
#pacman {
width:0px;
height:0px;
border-right:60px solid Transparent;
border-top:60px solid red;
border-left:60px solid red;
border-bottom:60px solid red;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}
24. Prompt dialog box
Final effect:
The CSS code is as follows:
Copy the code code as follows:
#talkbubble {
width:120px;
height:80px;
background:red;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#talkbubble: Before {
Content: "";
Position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid Transparent;
BORDER-RIGHT:26PX solid red;
border-bottom:13px solid Transparent;
}
25, 12 Point Star
Final effect:
The CSS code is as follows:
Copy the code code as follows:
#burst-12 {
background:red;
width:80px;
height:80px;
position:relative;
Text-align:center;
}
#burst -12:before, #burst -12:after {
Content: "";
Position:absolute;
top:0;
left:0;
height:80px;
width:80px;
background:red;
}
#burst -12:before {
-webkit-transform:rotate (30DEG);
-moz-transform:rotate (30DEG);
-ms-transform:rotate (30DEG);
-o-transform:rotate (30DEG);
Transform:rotate (30DEG);
}
#burst -12:after {
-webkit-transform:rotate (60DEG);
-moz-transform:rotate (60DEG);
-ms-transform:rotate (60DEG);
-o-transform:rotate (60DEG);
Transform:rotate (60DEG);
}
26, 8 Point Star
Final effect:
The CSS code is as follows:
Copy the code code as follows:
#burst-8 {
background:red;
width:80px;
height:80px;
position:relative;
Text-align:center;
-webkit-transform:rotate (20DEG);
-moz-transform:rotate (20DEG);
-ms-transform:rotate (20DEG);
-o-transform:rotate (20EG);
Transform:rotate (20DEG);
}
#burst -8:before {
Content: "";
Position:absolute;
top:0;
left:0;
height:80px;
width:80px;
background:red;
-webkit-transform:rotate (135DEG);
-moz-transform:rotate (135DEG);
-ms-transform:rotate (135DEG);
-o-transform:rotate (135DEG);
Transform:rotate (135DEG);
}
27. Diamond
Final effect:
The CSS code is as follows:
Copy the code code as follows:
#cut-diamond {
Border-style:solid;
Border-color:transparent transparent red transparent;
border-width:0 25px 25px 25px;
height:0;
width:50px;
position:relative;
margin:20px 0 50px 0;
}
#cut-diamond:after {
Content: "";
Position:absolute;
top:25px;
Left: -25px;
width:0;
height:0;
Border-style:solid;
border-color:red transparent transparent transparent;
border-width:70px 50px 0 50px;
}
28, the yin and yang gossip (domineering this)
The CSS code is as follows:
Copy the code code as follows:
#yin-yang {
width:96px;
height:48px;
Background: #eee;
border-color:red;
Border-style:solid;
border-width:2px 2px 50px 2px;
border-radius:100%;
position:relative;
}
#yin-yang:before {
Content: "";
Position:absolute;
top:50%;
left:0;
Background: #eee;
border:18px solid red;
border-radius:100%;
width:12px;
height:12px;
}
#yin-yang:after {
Content: "";
Position:absolute;
top:50%;
left:50%;
background:red;
border:18px solid #eee;
border-radius:100%;
width:12px;
height:12px;
}
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
Reproduced
The basic graphics of CSS's pure css (rectangle, circle, triangle, polygon, love, gossip, etc.)
