A variety of shape shapes written by CSS code

Do web design often need to use a variety of shapes, for the rules of the graphic is very simple, but for irregular graphics, generally we are using pictures, today is here to teach you how to use CSS code to write various rules of different graphics

1. Square

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

2. Rectangle

#rectangle {width:200px; height:100px; background:red;}

3. Upper Left Triangle

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

4. Upper Right Triangle

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

5. Lower left Triangle

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

6. Lower right triangle

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

7. Parallelogram

#parallelogram {width:150px; height:100px;-webkit-transform:skew (20deg);-moz-transform:skew (20deg);-o-transform: Skew (20DEG); background:red; }

8. trapezoid

#trapezoid {border-bottom:100px solid red; border-left:50px solid transparent; border-right:50px solid transparent; he ight:0; width:100px; }

9. 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-t op:100px solid red; Position:absolute; Content: ""; top:30px; Left: -50px; }

10. Pentagram

#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 Transpare nt 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: "; }

11. 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; }

12. 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; }

13. Peach Heart

#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%; }

14. Infinite Symbols

#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-tra Nsform:rotate (45DEG); -moz-transform:rotate (45DEG); -ms-transform:rotate (45DEG); -o-transform:rotate (45DEG); Transform:rotate (45DEG); }

15. Egg

#egg {display:block; width:126px; height:180px; background-color:red;-webkit-border-radius:63px 63px 63px 63px/108 PX 108px 72px 72px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }

16. Prompt dialog box

#talkbubble {width:120px; height:80px; background:red; position:relative;-moz-border-radius:10px;-webkit-border-ra dius: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; }

17.12 Point Star

#burst-8 {background:red; width:80px; height:80px; position:relative; text-align:center;-webkit-transform:rotate (2 0DEG); -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); }

18. Star Anise

#burst-8 {background:red; width:80px; height:80px; position:relative; text-align:center;-webkit-transform:rotate (2 0DEG); -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); }

19. 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; }

20. Gossip

#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; }