CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等剖析

1、css实现圆角，三角，五角星，五边形，爱 心，12角星，8角星，圆，椭圆，圆圈，八 卦等等1. 长方形 #Recta ngle width: 200px;height: 50px;backgro un d-color: red;color: white;text-alig n: cen ter;我是长方形2. 正方形#squarewidth: 200px;height: 200px;backgro un d-color: red;color: white;text-alig n: cen ter;我是正方形3. 实心圆#perfect-circlewidth: 200px;height: 20

2、0px;backgro un d-color: red;color: white;text-alig n: cen ter;border-radius: 100px;/*-webkit-border-radius: 100px;*/-moz-border-radius: 100px;4.圈#circlewidth: 200px;height: 200px;backgro un d-color: white;color: black;text-alig n: cen ter;border-radius: 100px;/*-webkit-border-radius: 10px;*/*-moz-bo

3、rder-radius: 100px;*/border:3px red solid;5.椭圆#ellipsewidth: 200px;height: 100px;backgro un d-color: red;color: white;text-alig n: cen ter;border-radius: 100px/50px;/*-webkit-border-radius: 100px/50px;*/*-moz-border-radius: 100px/50px;*/6.上三角#tria ngle-upwidth: 0px;height: 0px;color: white;text-alig

4、 n: cen ter;border-left: 50px solid tran spare nt;border-right: 50px solid tran spare nt; border-bottom: 100px solid red;/*-webkit-border-top-left-radius: 50px solid tran spare nt;*/ /*-webkit-border-top-right-radius: 50px solid tran spare nt;*/ /*-webkit-border-bottom-left-radius: 100px solid red;*

5、/ /*-webkit-border-bottom-right-radius: 100px solid red;*/ 7.下三角#tria ngle-dow nwidth: 0px;color: white; text-alig n: cen ter;border-top: 100px solid red; border-left: 50px solid tran spare nt; border-right: 50px solid tran spare nt;8.左三角#tria ngle-leftwidth: 0px;height: 0px;color: white;text-alig n

6、: cen ter;border-top: 50px solid tran spare nt;border-left: 100px solid red;border-bottom: 50px solid tran spare nt;9.右三角 #tria ngle-rightwidth: Opx;height: 0px;color: white;text-alig n: cen ter;border-top: 50px solid tran spare nt;border-right: 100px solid red; border-bottom: 50px solid tran spare

7、nt;10.顶左#tria ngle-topleft height: 0px;width: 0px;border-top: 100px solid red; border-right: 100px solid tran spare nt; 11.顶右#tria ngle-toprightwidth: 0px;height: 0px;border-top: 100 solid red;border-left: 100 solid tran spare nt;12.底左#tria ngle-bottomleftheight: Opx;border-bottom: 100px solid red;b

8、order-right: 100px solid tran spare nt;13.底右#tria ngle-bottomrightwidth: 0px;height: 0px;border-bottom: 100px solid red; border-left: 100px solid tran spare nt;width: 200px;14.平行四边形#parallelogram是我梯形height: 150px;marg in-left: 30px;-webkit-tra nsform: skew(-30deg);-moz-tra nsform: skew(200deg);-o-tr

9、a nsform: skew(200deg); backgro un d-color: red;15.#trapezoidborder-bottom: 100px solid red; border-left: 50px solid tran spare nt; border-right: 50px solid tran spare nt; width: 100px;height: 0px;16. #star-fivewidth: 0;height: 0;color: red;margin: 50px 0;positi on: relative;display: block;border-le

10、ft: 100px solid tran spare nt;border-right: 100px solid tran spare nt;border-bottom: 70px solid red;-moz-tra nsfrom:rotate(35deg);-webkit-tra nsform:rotate(35deg);-ms-tra nsform:rotate(35deg);-o-tra nsform:rotate(35deg);#star-five:beforewidth: 0;height: 0;border-left: 30px solid transparent; border-

11、right: 30px solid transparent; border-bottom: 80px solid red; position: absolute;top: -45px;left: -65px;color: white;display: block; content: ;-moz-transform:rotate(-35deg); -webkit-transform:rotate(-35deg); -ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);#star-five:afterwidth: 0;height: 0;

12、display: block;position: absolute; color: red;top: 3px;left: -105px; border-left: 100px solid tran spare nt; border-right: 100px solid tran spare nt; border-bottom: 70px solid red; conten t:;-moz-tra nsform:rotate(-70deg);-webkit-tra nsform:rotate(-70deg);-ms-tra nsform:rotate(-70deg);-o-tra nsform:

13、rotate(-70deg);仃.#star-sixwidth: 0;height: 0;border-left: 50px solid tran spare nt; border-right: 50px solid tran spare nt; border-bottom: 100px solid red; positi on: relative;#star-six:afterwidth: 0;height: 0;border-top: 100px solid red; border-left: 50px solid tran spare nt; border-right: 50px sol

14、id tran spare nt; positi on: absolute;conten t:;top: 30px;left: -50px;18. #pe ntag onwidth: 54px;positi on: relative;border-width: 50px 18px 0; border-style: solid;border-color: red tran spare nt;#pe ntag on:before conten t:;positi on: absolute;width: 0;height: 0;top: -85px;left: -18px;border-width:

15、 0 45px 35px;border-style: solid;border-color: tran spare nt tran spare nt red;19. #hexago nwidth: 100px;height: 55px;backgro un d-color: red;positi on: relative;#hexag on:beforeconten t:;position: absolute;top: -25px;left: 0;width: 0;height: ;border-left: 50px solid transparent; border-right: 50px

16、solid transparent; border-bottom: 25px solid red;#hexagon:aftercontent: ;left: 0;width: 0;height: 0;bottom: -25px;position: absolute;border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red;20. #octag onwidth: 100px;height: 100px;backgro un d-color: red;p

17、ositi on: relative;#octag on:beforewidth: 42px;height: 0;top: 0;left: 0;positi on: absolute;conten t:;border-left: 29px solid #eee; border-right: 29px solid #eee; border-bottom: 29px solid red;#octag on:after width: 42px;height: 0;left: 0;bottom: 0;positi on: absolute;conten t:;border-left: 29px sol

18、id #eee; border-right: 29px solid #eee;border-top: 29px solid red;21 #heartwidth: 100px;height: 90px;positi on: relative;#heart:before,#heart:after width: 50px;height: 80px;left: 50px;top: 0; background-color: red; position: absolute; content: ;-moz-border-radius:50px 50px 0 0; border-radius: 50px 5

19、0px 0 0; -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg);transform:rotate(-45deg); -webkit-transform-origin:0 100%; -ms-transform-origin:0 100%;-moz-transform-origin:0 100%;-o-transform-origin:0 100%; tansform-origin:0 100%;#h

20、eart:afterleft: 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg);tran sform:rotate(45deg);-webkit-tra nsform-origi n:100% 100%; -ms-tra nsform-origi n:100% 100%;-moz-tra nsform-origi n:100% 100%;-o-tra nsform-origi n:100% 100%;

21、tran sform-origi n:100% 100%;22. #infin itywidth: 212px;height: 100px;positi on: relative;#infini ty:before,#i nfini ty:afterwidth: 60px;height: 60px;top: 0;left: 0;border: 20px solid red;positi on: absolute;content: ;border-radius: 50px 50px 0 50px; -webkit-border-radius:50px 50px 0 50px; -moz-bord

22、er-radius:50px 50px 0 50px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);#infinity:afterleft: auto;right: 0;border-radius: 50px 50px 50px 0; -webkit-border-radius:50px 50px 50px 0; -moz-border-radius

23、:50px 50px 50px 0; transform:rotate(45deg);-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);oo23. #eggwidth: 126px;height: 180px;backgro un d-color: red;display: block;border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;/*-webkit-border-

24、radius:50% 50% 50% 50%/60% 60% 40% 40%;*/24. #pacma nwidth: 0;height: 0;border-right: 60px solid tran spare nt;border-left: 60px solid red; 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-

25、bottom-right-radius: 60px;25. #talkbubblewidth: 200px;height: 100px;backgro un d-color: red;positi on: relative; border-radius: 10px;-webkit-border-radius:10px; -moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;#talkbubble:beforewidth: 0;height: 0;right: 100%;top: 30px;positi on:

26、absolute;conten t:;border-top: 15px solid tran spare nt;border-right: 30px solid red;border-bottom: 15px solid tran spare nt; 26. #burst-12 width: 80px;height: 80px;backgro un d-color: red;positi on: relative;text-alig n: cen ter; #burst-12:before,#burst-12:afterwidth: 80px;height: 80px;top: 0;left:

27、 0;background-color: red;position: absolute; content: ;#burst-12:beforetransform:rotate(30deg);-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);#burst-12:aftertransform:rotate(60deg);-webkit-transform:rotate(60deg);-ms-transform:rota

28、te(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);27. #burst-8width: 80px;height: 80px;backgro un d-color: red;text-alig n: cen ter;positi on: relative;tran sform:rotate(20deg);-webkit-tra nsform:rotate(20deg);-ms-tra nsform:rotate(20deg);-moz-tra nsform:rotate(20deg);-o-tra nsform:rotate(20deg);#burst-8:beforewidth: 80px;height: 80px;top: 0;left: 0;backgro un d-color: red;positi on: absolute;conten t:;tran sform:rotate(135deg);-webkit-tra nsform:rotate(135deg);-ms-tra nsfor