"Go" method of various shapes and graphs written in CSS code

A total of 20 compiled graphics, more practical, but also to familiarize yourself with CSS code. Integration, there are mistakes welcome to point out.

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;height: 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-top: 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 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; &nb Sp 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, #in Finity: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; &nbsp ;       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);}

15. Egg

#egg {   display:block;   width: 126px;    height: 180px;   background-color: red;   -webkit-border-radius: 63px 63px 63px 63px / 108px 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-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;}

17.12 Point Star

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

Original Address HTTP://BLOGREAD.CN/IT/ARTICLE/7891?F=WB

"Go" method of various shapes and graphs written in CSS code