Drawing with CSS3

Reference: http://blog.csdn.net/fense_520/article/details/37892507

This article is not reproduced. For the individual original, reproduced please contact Bo First, thank you ~

Get ready:

<! DOCTYPE html>
XXX on-Demand changes
div {background:black;}
Good. Let's start drawing!

1. Rectangle
. rectangle {width:100px; height:100px;}
2. Round
. circle {width:100px; height:100px; border-radius:50px;}
watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvehpox2xvb3a=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast "> Figure 13. Cylindrical
. cylinder {width:100px; height:100px; border-radius:100px/50px;}
watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvehpox2xvb3a=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast ">
watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvehpox2xvb3a=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast "> Fig. 2-1 fig. 2-2 Fig. 2-3 When Orange is border-radius:100px/50px, the case of purple is border-radius:50px/100px. The values are horizontal and vertical radii respectively. A cylindrical shape is circled inside the square. To be able to find that Border-radius always keeps its center in the centre.
Why doesn't it look like Figure 2-2 < pending 1>? When we set up the border-radius:100px/100px, you will be surprised to find that it turns back into a circle again. You'd think it was like figure 2-3, but it's not actually. It is the same size as the circle in Figure 1, which is why < to be solved 2> 4. Oval
. oval {width:200px; height:100px; border-radius:100px/50px;}
Almost the same as a cylindrical shape, the width of the square expands to 200px, which fits the ellipse. An ellipse is a drawn ellipse!5. Triangles
[class^=triangle-] {width:0px; height:0px;}
First, the above triangle is an example:
. triangle-up {border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red;}
How did this triangle come about? I studied it carefully. Found that there is a demarcation between border, and this demarcation is 45 degrees inclined, 3, two border between the obvious demarcation, this is what we draw the triangle to use the principle, above has been set width and height of 0, At this time two border intersection there is a rectangle composed of two triangles, set one border as transparent, there is a triangle left. Yes, it's that simple. So how do you draw the upper triangle? Set left and right border and border-bottom, let left and right border become transparent. The upper triangle you see is actually made up of two triangles,-4.
Other kinds of triangles are similar, and you see which several border can make up this triangle and adjust the border-width by the way. There used to be a pen question-draw a ribbon, now think very simple, is not a yellow left triangle + yellow rectangle + White left triangle positioning made. For example, the following:
div {float:left;} #test {border-top:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid yellow;} #test2 {width:800px; height:200px; background:yellow;} #test3 {border-top:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid white; Margi n-left:-100px;}

Figure-3

Figure-46. Parallelogram--off-the-shelf properties--transform:skew (20deg) The meaning of left tilt7. TrapezoidIn fact, with the above-mentioned triangle a reason, just set its width to 100px,height for 0, that is, two triangles plus a width of 100px,height for the border-bottom width of the rectangle drawn.
8. Six Point Star
. 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;}
First line: Create an upper triangle, the pink part (the middle is obscured). Position for relative. Second line: The location of the pseudo-class is absolute. Because the width of the Star-six class is 0. The starting position of the pseudo-class in Figure 5 See the Circle, to clarify a principle, if the star-six width is not 0, pseudo-class block is inside the star-six, because the position is set to relative and absolute respectively, then two or three angle form a parallelogram, This is a way of painting parallelogram. When I try to get rid of the position:absolute, I find that the pseudo-class element is only half the left and is located on the top right of the star-six element.This is why < to solve 3> (Before is in the back, and after is in front?) That's weird .A: I'm mistaken. : After really is in the back.
 The next step is to locate the top:30px; left:-50px; Move the original triangle to the position seen by the green triangle, when they form a hexagonal shape. Other: Content: "", this must have. If not is normal, online to see an article wrote "Content:normal will: Before and: After pseudo-elements calculated as ' None ', and Content:none pseudo-element is not generated, about the content property, I do not understand, You find your own information.   
 Figure 5  9. Pentagram  
. star-five {margin:50px 0; position:relative; width:0px; height:0px; border-left:100px solid transparent; border-right : 100px solid transparent;    border-bottom:70px solid red;        -webkit-transform:rotate (35DEG);         -moz-transform:rotate (35DEG);          -ms-transform:rotate (35DEG); -o-transform:rotate (35DEG); }. star-five:before {border-bottom:80px solid orange; border-left:30px solid transparent; border-right:30px solid TRANSP arent; 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 {border-bottom:70px solid green; border-left:100px solid transparent; border-right:100px solid TRANSP arent; Position:absolute; Display:block; color:red; top:3px; left:-105px; width:0px; height:0px;    Content: ";        -webkit-transform:rotate ( -70DEG);    -moz-transform:rotate ( -70DEG);     -ms-transform:rotate ( -70DEG); -o-transform:rotate ( -70DEG); }
Using the previously mentioned method, the triangles are drawn and rotated and positioned separately. What the code sees: before pseudo-class elements draw a small triangle at the top of a pentagram. We can also draw: before with star-five and: After the size of the triangle and then rotated positioning.10. The Pentagon(or Pentagon)--made up of two trapezoidal (or you use a variety of grotesque pieces), nothing to say.
11. Hexagon = Upper triangle + rectangle + Lower triangle 12. Eight side shape = Upper trapezoid + rectangle + lower trapezoid 13. Love = Two rectangles with two rounded corners, 6. (Transform-oritin defines the datum point for rotation, which works on the Rotate property)
Fig. 614. Infinity Symbol = two rectangles (3 fillets and one right angle respectively)15. Egg = a rectangle with rounded corners 16. Pills
. pill {width:0px; height:0px; border-right:60px solid transparent; border-top:60px solid red; border-bottom:60px solid RE D border-radius:60px;}
Figure 7 I don't know how it was formed. Supposedly. It only has the intersection of the top, bottom and right, and the border-xxx-left should have no effect, but he does, and he's a little puzzled about the change. -7 Next two steps < pending 4>.17. dialog Box= Rounded Rectangle + Left triangle18. Diamond= trapezoid + Lower triangle

I think the use of CSS3 drawing shape in the actual application of no great use, is purely used to practiced hand good (perhaps also can cope with a few pen test).
Finally, thank you for reading it carefully. Deficiencies, it is welcome to point out. By the way help me to answer a few to solve this problem. 


Full code:
div {background:black;} /* Rectangle */.rectangle {width:100px; height:100px;} /* Round */.circle {width:100px; height:100px; border-radius:50px;}  /* Column shape */. Cylinder {width:100px; height:100px; border-radius:100px/50px;} /* OVAL */. oval {width:200px; height:100px; border-radius:100px/50px;} /* Various triangles */[class^=triangle-] {width:0px; height:0px;}. triangle-up {border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red;}. Triangle-down {border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red;}. triangle-equal {border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:50px solid red;}. Triangle-left {border-top:50px solid transparent; border-right:100px solid red; border-bottom:50px solid Transparent;}. Triangle-right {border-top:50px solid transparent; border-left:100px solid red; border-bottom:50px solid Transparent;}. triangle-left-up {border-top:100px solid red; border-right:200px solid Transparent;}  . triangle-right-up {border-top:100px solid red; border-left:200px solid Transparent;}  . triangle-left-down {border-bottom:100px solid red; border-right:200px solid Transparent;} . triangle-right-down {border-bottom:100px solid red; border-left:200px solid Transparent;}      /* Parallelogram */. Parallelogram {width:150px; height:100px; margin-left:20px;       -webkit-transform:skew (20DEG);         -moz-transform:skew (20DEG); -o-transform:skew (20DEG); }/* trapezoid */.trapezoid {width:100px; height:0px; border-bottom:100px solid red; border-left:50px solid transparent;  border-right:50px solid Transparent;} /* Hex star */.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;} /* Pentagram */.star-five {margin:50px 0; position:relative; width:0px; height:0px; border-left:100px solid Transparent; border-right:100px solid Transparent;    border-bottom:70px solid red;        -webkit-transform:rotate (35DEG);         -moz-transform:rotate (35DEG);          -ms-transform:rotate (35DEG); -o-transform:rotate (35DEG); }. star-five:before {border-bottom:80px solid orange; border-left:30px solid transparent; border-right:30px solid TRANSP arent; 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 {border-bottom:70px solid green; border-left:100px solid transparent; border-right:100px solid TRANSP arent; Position:absolute; Display:block; color:red; top:3px; left:-105px; width:0px; height:0px;    Content: ";        -webkit-transform:rotate ( -70DEG);         -moz-transform:rotate ( -70DEG); -ms-transform:roTate ( -70DEG); -o-transform:rotate ( -70DEG); }/* Pentagon */.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;}  /* hexagon */. 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;}    /* Eight-side */.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;} /* Love * * Heart {position:relative; width:100px; height:90px;}. Heart:before {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; content: ""; Position:absolute; 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:100% 100%;          -moz-transform-origin:100% 100%;           -ms-transform-origin:100% 100%;              -o-transform-origin:100% 100%; transform-origin:100% 100%;  }/* Infinity Symbol */. Infinity {position:relative; width:212px; height:100px;} . infinity:before {width:60px; height:60px; border:20px solid red; content: "";    Position:absolute;           -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 {right:auto; width:60px; height:60px; border:20px solid red; Content: "";    Position:absolute;         -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);    }/* eggs */. Egg {width:126px; height:180px; background-color:red;             -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px72px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }/* pills */. pill {width:0px; height:0px; border-right:60px solid transparent; border-top:60px solid red; border-bottom:60p    x solid red;    border-top-left-radius:60px;    border-top-right-radius:60px;    border-bottom-left-radius:60px; border-bottom-right-radius:60px;    }/* dialog box */. talkbubble {width:120px; height:80px; background:red; position:relative;       -webkit-border-radius:10px;            -moz-border-radius:10px;  border-radius:10px;} . talkbubble:before {content: ""; Position:absolute; Right:10%; top:26px; width:0; height:0; border-top:13px solid Transparent; BORDER-RIGHT:26PX solid red; border-bottom:13px solid Transparent;} /* Diamond */.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;}


 
Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.
 
Drawing with CSS3