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

1、CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等1.长方形#Rectanglewidth: 200px;height: 50px;background-color: red;color: white;text-align: center;2.正方形#squarewidth: 200px;height: 200px;background-color: red;color: white;text-align: center;3.实心圆#perfect-circlewidth: 200px;height: 200px;background-color: red;

2、color: white;text-align: center;border-radius: 100px;/*-webkit-border-radius: 100px;*/-moz-border-radius: 100px;4.圈#circlewidth: 200px;height: 200px;background-color: white;color: black;text-align: center;border-radius: 100px;/*-webkit-border-radius: 10px;*/*-moz-border-radius: 100px;*/border:3px re

3、d solid;5.椭圆#ellipsewidth: 200px;height: 100px;background-color: red;color: white;text-align: center;border-radius: 100px/50px;/*-webkit-border-radius: 100px/50px;*/*-moz-border-radius: 100px/50px;*/6.上三角#triangle-upwidth: 0px;height: 0px;color: white;text-align: center;border-left: 50px solid trans

4、parent; border-right: 50px solid transparent; border-bottom: 100px solid red;/*-webkit-border-top-left-radius: 50px solid transparent;*/*-webkit-border-top-right-radius: 50px solid transparent;*/*-webkit-border-bottom-left-radius: 100px solid red;*/*-webkit-border-bottom-right-radius: 100px solid re

5、d;*/7.下三角#triangle-downwidth: 0px;height: 0px;color: white;text-align: center;border-top: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;8.左三角#triangle-leftwidth: 0px;height: 0px;color: white;text-align: center;border-top: 50px solid transparent;border-left:

6、 100px solid red;border-bottom: 50px solid transparent;9.右三角#triangle-rightwidth: 0px;height: 0px;color: white;text-align: center;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;10.顶左#triangle-topleftwidth: 0px;height: 0px;border-top: 100px soli

7、d red;border-right: 100px solid transparent;11.顶右#triangle-toprightwidth: 0px;height: 0px;border-top: 100 solid red;border-left: 100 solid transparent;12.底左#triangle-bottomleftwidth: 0px;height: 0px;border-bottom: 100px solid red;border-right: 100px solid transparent;13.底右#triangle-bottomrightwidth:

8、 0px;height: 0px;border-bottom: 100px solid red;border-left: 100px solid transparent;14.平行四边形#parallelogramwidth: 200px;height: 150px;margin-left: 30px;-webkit-transform: skew(-30deg);-moz-transform: skew(200deg);-o-transform: skew(200deg);background-color: red;15.#trapezoidborder-bottom: 100px soli

9、d red;border-left: 50px solid transparent;border-right: 50px solid transparent;width: 100px;height: 0px;16. #star-fivewidth: 0;height: 0;color: red;margin: 50px 0;position: relative;display: block;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 70px solid re

10、d;-moz-transfrom:rotate(35deg);-webkit-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);#star-five:beforewidth: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 80px solid red;position: absolute;top: -45px;left: -65px;c

11、olor: 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;display: block;position: absolute;color: red;top: 3px;left: -105px;border-left: 100px solid transparent;bord

12、er-right: 100px solid transparent;border-bottom: 70px solid red;content: ;-moz-transform:rotate(-70deg);-webkit-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);17. #star-sixwidth: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;b

13、order-bottom: 100px solid red;position: relative;#star-six:afterwidth: 0;height: 0;border-top: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;position: absolute;content: ;top: 30px;left: -50px;18. #pentagonwidth: 54px;position: relative;border-width: 50px 18

14、px 0;border-style: solid;border-color: red transparent;#pentagon:beforecontent: ;position: absolute;width: 0;height: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent red;19. #hexagonwidth: 100px;height: 55px;background-color: red;position:

15、relative;#hexagon:beforecontent: ;position: absolute;top: -25px;left: 0;width: 0;height: ;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid red;#hexagon:aftercontent: ;left: 0;width: 0;height: 0;bottom: -25px;position: absolute;border-left: 50px solid

16、 transparent;border-right: 50px solid transparent;border-top: 25px solid red;20. #octagonwidth: 100px;height: 100px;background-color: red;position: relative;#octagon:beforewidth: 42px;height: 0;top: 0;left: 0;position: absolute;content: ;border-left: 29px solid #eee;border-right: 29px solid #eee;bor

17、der-bottom: 29px solid red;#octagon:afterwidth: 42px;height: 0;left: 0;bottom: 0;position: absolute;content: ;border-left: 29px solid #eee;border-right: 29px solid #eee;border-top: 29px solid red;21 #heartwidth: 100px;height: 90px;position: relative;#heart:before,#heart:afterwidth: 50px;height: 80px

18、;left: 50px;top: 0;background-color: red;position: absolute;content: ;-moz-border-radius:50px 50px 0 0;border-radius: 50px 50px 0 0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origi

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

20、:100% 100%;-ms-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform-origin:100% 100%;22. #infinitywidth: 212px;height: 100px;position: relative;#infinity:before,#infinity:afterwidth: 60px;height: 60px;top: 0;left: 0;border: 20px solid red;position: absol

21、ute;content: ;border-radius: 50px 50px 0 50px;-webkit-border-radius:50px 50px 0 50px;-moz-border-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

22、;border-radius: 50px 50px 50px 0;-webkit-border-radius:50px 50px 50px 0;-moz-border-radius:50px 50px 50px 0;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);23. #eggwidth: 126px;height: 180px;background-color:

23、 red;display: block;border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/24. #pacmanwidth: 0;height: 0;border-right: 60px solid transparent;border-left: 60px solid red;border-top: 60px solid red;border-bottom: 60px solid red;border-top-left-radius:

24、 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;25. #talkbubblewidth: 200px;height: 100px;background-color: red;position: relative;border-radius: 10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;

25、#talkbubble:beforewidth: 0;height: 0;right: 100%;top: 30px;position: absolute;content: ;border-top: 15px solid transparent;border-right: 30px solid red;border-bottom: 15px solid transparent;26. #burst-12width: 80px;height: 80px;background-color: red;position: relative;text-align: center;#burst-12:be

26、fore,#burst-12:afterwidth: 80px;height: 80px;top: 0;left: 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(6

27、0deg);-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);27. #burst-8width: 80px;height: 80px;background-color: red;text-align: center;position: relative;transform:rotate(20deg);-webkit-transform:rotate(20deg);-ms-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);#burst-8:beforewidth: 80px;height: 80px;top: 0;left: 0;background-color: red;position: absolute;content: ;transform:rotate(135deg);-webkit-transform:rotate(135deg);-ms-tran