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