Home > Developer > Web Develop
Use CSS3 to draw images and CSS3 to draw images
References: http://blog.csdn.net/fense_520/article/details/37892507
This article is not reprinted. It is original. Please contact the blogger for reprinting. Thank you ~
Preparation:
<!DOCTYPE html>Xxx changed as neededdiv { background:black;}Okay. Let's start drawing!
1. rectangle
.rectangle { width:100px; height:100px;}2. Circle
.circle { width:100px; height:100px; border-radius:50px;}Figure 1 3. cylindrical.cylinder {width:100px; height:100px; border-radius:100px/50px;}Figure 2-1 Figure 2-2 Figure 2-3 when orange is border-radius: 100px/50px and purple is border-radius: 50px/100px, the values are the horizontal radius and the vertical radius respectively. A cylindrical shape is enclosed in the square. It can be found that the border-radius always keeps its center. Why isn't it like Figure 2-2? <waiting for solution 1>? When we set border-radius: 100px/100px, you will be surprised to find that it is changed back to a circle, you will think it is like Figure 2-3, but actually it is not. It is the same size as the circle in Figure 1. Why? <to be resolved 2>? 4. elliptical shape.oval {width:200px; height:100px; border-radius:100px/50px;}It is similar to a cylindrical shape. It expands the width of a square to PX, and it fits the elliptic. The elliptic is the drawn elliptic! 5. triangles[class^=triangle-] { width:0px; height:0px;}Take the preceding triangle as an example:.triangle-up { border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red;}How did this triangle come from? I have studied it carefully and found that there is a boundary between border, which is 45 degrees skewed.-3, there is a clear boundary between the two border, this is the principle we need to use to draw a triangle. The width and height are set to 0 above. Then there is a rectangle composed of two triangles at the intersection of the two border, if one of the border is set to transparent, there is only one triangle left. Yes, it's that simple. How should I draw this triangle? Set the Left and Right border and border-bottom to make the Left and Right border transparent. The triangle you see is actually composed of two triangles,-4. Similar to other kinds of triangles, you can adjust the border-width by looking at which border can form this triangle. I used to have a pen question-draw a ribbon. Now it's easy to think about it. It's not just a yellow Left triangle, a yellow rectangle, or a white Left triangle: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; margin-left:-100px;}
Figure-3
Figure 4 6. Parallelogram-- Off-the-shelf Property -- transform: indicates the left skew of skew (20deg ). 7. TrapezoidIn fact, the above triangle is a truth, but set its width to 100px and height to 0, that is, add a width of 100px to the two triangles, height is drawn from a rectangle with the border-bottom width. 8. hexagonal stars.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;}The first line: Create an upper triangle, the pink part (the middle is blocked), and the position is relative. Row 2: The position of the pseudo class is absolute. Because the width and height of the star-six class are both 0, the starting position of the pseudo class is in the circle shown in figure-5. To understand the principle, if the width and height of star-six are not 0, the pseudo-class block is inside star-six, because the position is set to relative and absolute respectively, then the two triangles form a parallelogram, this is also a method for drawing parallelogram. When I try to remove position: absolute, I find that only half of the pseudo-class elements are left, and they are located in the upper-right corner of the star-six element, Why is this <to be resolved 3>? (Before is behind, and after is before? Strange)A: I have a blind eye. after is indeed behind me. The next step is to locate top: 30px; left:-50px; move the original triangle to the position shown in the green triangle, and then they form a hexagonal shape. Other: content: "", this must be available. If it is not, it is normal. There is an article on the Internet that says "content: normal: before and: after, the pseudo elements are calculated as 'none', while the pseudo elements of content: none are not generated. I don't know much about the content attribute. You can search for the information on your own.
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 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 { border-bottom:70px solid green; border-left:100px solid transparent; border-right:100px solid transparent; 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 method mentioned above, draw a triangle and then rotate and locate it. The Code shows that the before pseudo-class Element draws a small triangle at the top of the pentagram. We can also: before is drawn as a triangle of the same size as star-five and: after and then rotated and positioned. 10. Pentagon(Or Pentagon)-composed of two trapezoid shapes (or you can piece them together with various strange shapes. 11. hexagonal= Upper triangle + rectangle + lower triangle 12. octagonal= Upper trapezoid + rectangle + lower Trapezoid 13. Love= Two rectangles with two rounded corners,-6 (transform-oritin defines the rotation datum point, which takes effect on the rotate attribute)
Figure 6 14. Infinite symbols= Two rectangles (three rounded corners and one right corner respectively) 15. Eggs= 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 red; border-radius:60px;}Figure-7 I don't know how it is formed. As a result, it only has the intersection of the top, bottom, and right. border-xxx-left should be ineffective, but he did, and he was a bit confused about the change.-The next two steps in Step 7 <to be resolved 4>. 17. Dialog Box= Rounded rectangle + Left triangle 18. Diamond= Trapezoid + lower triangle
I think it is useless to use css3 to draw images in practical applications. It is purely intended for hands-on practice (maybe I can handle a few additional questions ).
Finally, thank you for reading it carefully! By the way, I will answer a few questions to be resolved.
Complete code:Div {background: black;}/* rectangle */. rectangle {width: 100px; height: 100px;}/* circle */. circle {width: 100px; height: 100px; border-radius: 50px;}/* figure column */. cylinder {width: 100px; height: 100px; border-radius: 100px/50px;}/* elliptical */. 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 ;} /* hexagonal 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 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 {border-bottom: 70px solid green; border-left: 100px solid transparent; border-right: 100px solid transparent; 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 red;}/* hexagonal */. 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;}/* octagonal */. 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;}/* */. 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 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/pixel PX %px 72px72px; border-radius: 50% 50% 50% 50%/60% 60% 40%;}/* pill */. pill {width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 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;}/* 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: 100%; 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 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; border-width: 70px 50px 0 50px ;}
Help me draw this pattern with pure CSS3. If it is like this, add points.<Div style = "border: 25px solid white; width: 0; height: 0; float: left; border-right-color: black;"> </div>
<Div style = "height: 50px; width: 80px; background: black; border-top-right-radius: 8px; border-bottom-right-radius: 8px; display: inline-block; float: left; "> </div>
Haha, I drew one, and the landlord has received it.
Hope to help you ~~
Css3 help draw a water drop chart<Html>
<Body>
<Style type = "text/css">
Span {height: 40px; width: 40px; display: block; position: relative ;}
. DemoSpan1 {width: 26px ;}
. DemoSpan1: before {content: '1'; height: 26px; width: 26px; display: block; position: absolute; top: 2px; left: 0px; z-index: 1; line-height: 26px; background: #333; border-radius: 40px;-webkit-border-radius: 40px;-moz-border-radius: 40px; color: # fff; text-align: center ;}
. DemoSpan1: after {content: ''; height: 0px; width: 0px; display: block; position: absolute; bottom: 2px; left: 3px; border: 10px transparent solid; border-top-color: #333; border-width: 15px 10px 0px 10px ;}
</Style>
<Span class = "demoSpan1">
</Span>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
