Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the drawing methods of CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Square

The real-time rendering effect is as follows:

Related CSS codes:

# square {width: 100px; height: 100px; background: red;} 2. Rectangle

Effect:

Related CSS codes:

# rectangle {width: 200px; height: 100px; background: red;} my front-end learning communication button qun:731771211 is recommended here, which is full of learning front-end 3. Positive circle

This is obviously achieved with the help of fillets, and the effect is as follows:

Related CSS codes:

# circle {width: 100px; height: 100px; background: red; border-radius: 50%} 4. Ellipse

The effect is as follows:

Compared with the positive circle, the size is a little different, the relevant CSS code:

# oval {width: 200px; height: 100px; background: red; border-radius: 50%;} 5. Upward triangle

The effect is as follows:

Related CSS codes:

# triangle-up {width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;} 6. Downward triangle

The effect is as follows:

Related CSS codes:

# triangle-down {width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;} 7. A triangle facing left.

The effect is as follows:

Related CSS codes:

# triangle-left {width: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;} 8. A triangle facing to the right

The effect is as follows:

Related CSS codes:

# triangle-right {width: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent;} my front-end learning communication button qun:731771211 is recommended here, which is full of learning front-end 9. Left upper triangle

The effect is as follows:

Related CSS codes:

# triangle-topleft {width: 0; border-top: 100px solid red; border-right: 100px solid transparent;}

You can also use a 45 °oblique linear gradient, but compatibility is not as good as using border.

10. Right upper triangle

The effect is as follows:

Related CSS codes:

# triangle-topright {width: 0; border-top: 100px solid red; border-left: 100px solid transparent;}

You can also use a 45 °oblique linear gradient, but compatibility is not as good as using border.

11. Lower left corner triangle figure

The effect is as follows:

Related CSS codes:

# triangle-bottomleft {width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}

You can also use gradients to draw.

twelve。 Lower right corner triangle figure

The effect is as follows:

Related CSS codes:

# triangle-bottomright {width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent;}

You can also use gradients to draw.

13. Arc tail arrow

The effect is as follows:

Complete CSS code:

# curvedarrow {position: relative; width: 0; border-top: 90px solid transparent; border-right: 90px solid red; transform: rotate (10deg) translateX;} # curvedarrow:after {content: "; position: absolute; border: 0 solid transparent; border-top: 30px solid red; border-radius: 200px 00; top:-120px; left:-90px; width: 120px; height: 120px; transform: rotate (45deg);}

It is not necessary to use such a large figure in practical use, just reduce all the values in CSS (not including rotation) by 10 times.

14. Trapezoid

The effect is as follows:

Related CSS codes:

# trapezoid {border-bottom: 100px solid red; border-left: 25px solid transparent; border-right: 25px solid transparent; width: 100px;} here I recommend my front-end learning communication button qun:731771211, which is full of 15. Equilateral quadrilateral

The rendering effect of the page is as follows:

This can be achieved with the skew skew of the transform attribute:

# parallelogram {width: 150px; height: 100px; transform: skew (20deg); background: red;} 16. Hexagonal star

The effect is as follows:

Related CSS codes:

# star-six {width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative;} # star-six:after {border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: "; top: 30px; left:-50px;} 17. Pentagram

The effect is as follows:

It is much more difficult to realize a pentagonal star than a hexagonal. The CSS code is:

# star-five {margin: 50px 0; position: relative; color: red; width: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; transform: rotate (35deg);} # star-five:before {border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; top:-45px; left:-65px; content:''; transform: rotate (- 35deg) } # star-five:after {position: absolute; color: red; top: 3px; left:-105px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; transform: rotate (- 70deg); content:'';} 18. Polygon-Pentagon

The effect is as follows:

Related CSS codes:

# pentagon {position: relative; width: 54px; box-sizing: content-box; border-width: 50px 18px 0; border-style: solid; border-color: red transparent;} # pentagon:before {content: "; position: absolute; top:-85px; left:-18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red;}

Of course, the easiest way to understand is to use clip-path

19. Polygon-hexagon

The effect is as follows:

Related CSS codes:

# hexagon {width: 100px; height: 55px; background: red; position: relative;} # hexagon:before {content: ""; position: absolute; top:-25px; left: 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; border-left: 50px solid transparent; border-right: 50px solid transparent Border-top: 25px solid red;} 20. Polygon-octagon

The effect is as follows:

Related CSS codes:

# octagon {width: 100px; height: 100px; background: red; position: relative;} # octagon:before {content: "; width: 100px; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid # fff; border-right: 29px solid # fff; box-sizing: border-box;} # octagon:after {content:"; width: 100px; position: absolute; bottom: 0; left: 0 Border-top: 29px solid red; border-left: 29px solid # fff; border-right: 29px solid # fff; box-sizing: border-box;} 21. Love ❥

The effect of love after realization:

Related CSS codes:

# heart {position: relative; width: 100px; height: 90px;} # heart:before,#heart:after {position: absolute; content: "; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 00; transform: rotate (- 45deg); transform-origin: 0100%;} # heart:after {left: 0; transform: rotate (45deg); transform-origin: 100% Here I would like to recommend my front-end learning communication qun:731771211, which is all front-end learning.

The author of this effect is Nicolas Gallagher.

twenty-two。 Infinite

The effect is as follows:

Related CSS codes:

# infinity {position: relative; width: 212px; height: 100px; box-sizing: content-box;} # infinity:before,#infinity:after {content: "; box-sizing: content-box; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; border-radius: 50px 50px 050px; transform: rotate (- 45deg);} # infinity:after {left: auto; right: 0; border-radius: 50px 50px 50px 0 Transform: rotate (45deg);} 23. Diamond square

The effect is as follows:

Related CSS codes:

# diamond {width: 0; height: 0; border: 50px solid transparent; border-bottom-color: red; position: relative; top:-50px;} # diamond:after {content:'; position: absolute; left:-50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: red;} 24. Diamond shield

The effect is as follows:

Related CSS codes:

# diamond-shield {width: 0; border: 50px solid transparent; border-bottom: 20px solid red; position: relative; top:-50px;} # diamond-shield:after {content:'; position: absolute; left:-50px; top: 20px; border: 50px solid transparent; border-top: 70px solid red;} 25. Square diamond-narrow

The effect is as follows:

Related CSS codes:

# diamond-narrow {width: 0; border: 50px solid transparent; border-bottom: 70px solid red; position: relative; top:-50px;} # diamond-narrow:after {content:''; position: absolute; left:-50px; top: 70px; border: 50px solid transparent; border-top: 70px solid red;}

The author of this effect is Joseph Silber.

twenty-six。 Cut diamond-like diamond

After learning this, just write a few lines of CSS to your girlfriend when you propose, and you can save a lot of money.

Valuable CSS code:

# cut-diamond {border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; width: 50px; box-sizing: content-box; position: relative; margin: 20px 0 50px 0;} # cut-diamond:after {content: "; position: absolute; top: 25px; left:-25px; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 050px;} 27. Egg shape

The effect is good:

The implementation is also very simple, just one border-radius is fine:

# egg {display: block; width: 126px; height: 180px; background-color: red; border-radius: 50% 50% 50% / 60% 40%;} 28. Pac-Man

The effect is as follows:

Related CSS codes:

# 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;} 29. Talking bubbles with sharp corners

The effect is as follows:

Related CSS codes:

# talkbubble {width: 120px; height: 80px; background: red; position: relative; border-radius: 10px;} # talkbubble:before {content: "; position: absolute; right: 100%; top: 26px; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent;} 30. Twelve stars

The effect is as follows:

Related CSS codes:

# 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 {transform: rotate (30deg);} # burst-12:after {transform: rotate (60deg) Here I would like to recommend my front-end learning communication qun:731771211, which is all front-end learning.

The author of this effect is Alan Johnson.

thirty-one。 Octagonal shape

The effect is as follows:

Related CSS codes:

# burst-8 {background: red; width: 80px; height: 80px; position: relative; text-align: center; transform: rotate (20deg);} # burst-8:before {content: "; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; transform: rotate (135deg);} 32. Yin and Yang gossip

The effect is as follows:

Related CSS codes:

# 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: # fff; 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;} 33. Badge ribbon

The effect is as follows:

Related CSS codes:

# badge-ribbon {position: relative; background: red; height: 100px; width: 100px; border-radius: 50px;} # badge-ribbon::before,#badge-ribbon::after {content:'; position: absolute; border-bottom: 70px solid red; border-left: 40px solid transparent; border-right: 40px solid transparent; top: 70px; left:-10px; transform: rotate (- 140deg);} # badge-ribbon::after {left: auto; right:-10px Transform: rotate (140deg);} 34. Bilibili TV set

The effect is as follows:

Related CSS codes:

# tv {position: relative; width: 200px; height: 150px; margin: 20px 0; background: red; border-radius: 50 / 10%; color: white; text-align: center; text-indent: .1em;} # tv:before {content:'; position: absolute; top: 10%; bottom: 10%; right:-5%; left:-5%; background: inherit; border-radius: 5% / 50%;} 35. V-shaped line

The effect is as follows:

Related CSS codes:

# chevron {position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px; width: 200px;} # chevron:before {content:'; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: red; transform: skew (0deg, 6deg);} # chevron:after {content:'; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: red Transform: skew (0deg,-6deg);} here I recommend my front-end learning communication button qun:731771211, which is all 36. Magnifying glass

The effect is as follows:

Related CSS codes:

# magnifying-glass {font-size: 10em; display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em;} # magnifying-glass:before {content: ""; display: inline-block; position: absolute; right:-0.25em; bottom:-0.1em; border-width: 0; background: red; width: 0.35mm; height: 0.08m; transform: rotate (45deg) Here I would like to recommend my front-end learning communication qun:731771211, which is all front-end learning.

This implementation is very good, the unit is em, it is very practical.

thirty-seven。 The bend of the moon

The moon shines on Kyushu:

Related CSS codes:

# moon {width: 80px; height: 80px; border-radius: 50%; box-shadow: 15px 15px 0 0 red;} 38. Flag

The effect is as follows:

Related CSS codes:

# flag {width: 110px; height: 56px; padding-top: 15px; position: relative; background: red;} # flag:after {content: "; position: absolute; left: 0; bottom: 0; border-bottom: 13px solid # fff; border-left: 55px solid transparent; border-right: 55px solid transparent;} 39. Conical body

The effect is as follows:

The fillet border-radius property is still active:

# cone {width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 100px solid red; border-radius: 50%;} 40. The cross.

The effect is as follows:

Can be used as an add button or as an icon.

Related codes:

# cross {background: red; width: 20px; height: 100px; position: relative;} # cross:after {background: red; content: ""; width: 100px; height: 20px; position: absolute; left:-40px; top: 40px;} 41. Baseball pedal shape

The effect is as follows:

Related CSS codes:

# base {background: red; display: inline-block; height: 55px; width: 100px; margin-left: 20px; margin-top: 55px; position: relative;} # base:before {border-bottom: 35px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; content: "; left: 0; top:-35px; position: absolute;} 42. A long pointing figure

The effect is as follows:

Related CSS codes:

# pointer {width: 200px; height: 40px; position: relative; background: red;} # pointer:after {content: "; position: absolute; left: 0; bottom: 0; border-left: 20px solid white; border-top: 20px solid transparent; border-bottom: 20px solid transparent;} # pointer:before {content:"; position: absolute; right:-20px; bottom: 0; border-left: 20px solid red; border-top: 20px solid transparent; border-bottom: 20px solid transparent Here I recommend my front-end learning communication button qun:731771211, which is all 43. Lock

The effect is as follows:

Related CSS codes:

# lock {font-size: 8px; position: relative; width: 18em; height: 13mm; border-radius: 2mm; top: 10em; box-sizing: border-box; border: 3.5em solid red; border-right-width: 7.5em; border-left-width: 7.5mm; margin: 0 6rem 0;} # lock:before {content: "; box-sizing: border-box; position: absolute; border: 2.5em solid red; width: 14em; height: 12em Left: 50%; margin-left:-7em; top:-12em; border-top-left-radius: 7em; border-top-right-radius: 7em;} # lock:after {content: "; box-sizing: border-box; position: absolute; border: 1em solid red; width: 5mm; height: 8em; border-radius: 2.5mm; left: 50%; top:-1em; margin-left:-2.5em } the content of "what are the methods of drawing CSS graphics" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.