HTML:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css各种形状</title> 5 <link rel="stylesheet" type="text/css" href="css/xianghzuang.css"> 6 </head> 7 <body> 8 <div class="shape-square0"></div> 9 <div class="shape-square1"></div> 10 <div class="shape-square2"></div> 11 <div class="shape-square3"></div> 12 <div class="shape-square4"></div> 13 <div class="shape-square5"></div> 14 <div class="shape-square6"></div> 15 <div class="shape-square7"></div> 16 <div class="shape-square8"></div> 17 <div class="shape-square9"></div> 18 <div class="shape-square10"></div> 19 <div class="shape-square11"></div> 20 <div class="shape-square12"></div> 21 <div class="shape-square13"></div> 22 <div class="shape-square14"></div> 23 <div class="shape-square15"></div> 24 <div class="shape-square16"></div> 25 <div class="shape-square17"></div> 26 <div class="shape-square18"></div> 27 <div class="shape-square19"></div> 28 <div class="shape-square20"></div> 29 <div class="shape-square21"></div> 30 <div class="shape-square22"></div> 31 <div class="shape-square23"></div> 32 <div class="shape-square24"></div> 33 <div class="shape-square25"></div> 34 <div class="shape-square26"></div> 35 <div class="shape-square27"></div> 36 <div class="shape-square28"></div> 37 <div class="shape-square29"></div> 38 <div class="shape-square30"></div> 39 <div class="shape-square31"></div> 40 <div class="shape-square32"></div> 41 <div class="shape-square33"></div> 42 <div class="shape-square34"></div> 43 <div class="shape-square35"></div> 44 <div class="shape-square36"></div> 45 <div class="shape-square37"></div> 46 <div class="shape-square38"></div> 47 <div class="shape-square39"></div> 48 <div class="shape-square40"></div> 49 <div class="shape-square41"></div> 50 <div class="shape-square42"></div> 51 <div class="shape-square43"></div> 52 <div class="shape-square44"></div> 53 <div class="shape-square45"></div> 54 <div class="shape-square46"></div> 55 <div class="shape-square47"></div> 56 <div class="shape-square48"></div> 57 <div class="shape-square49"></div> 58 <div class="shape-square50"></div> 59 <div class="shape-square51"></div> 60 <div class="shape-square52"></div> 61 <div class="shape-square53"></div> 62 <div class="shape-square54"></div> 63 <div class="shape-square55"></div> 64 <div class="shape-square56"></div> 65 <div class="shape-square57"></div> 66 <div class="shape-square58"></div> 67 <div class="shape-square59"></div> 68 <div class="shape-square60"></div> 69 </body> 70 </html>
CSS:
1 @charset "utf-8"; 2 div{display: inline-block;margin:40px;} 3 @-webkit-keyframes rotateA {0%{ -webkit-transform:rotate(0deg);}100%{-webkit-transform: rotate(360deg);}} 4 .shape-square0{0;height:0;border-style: solid;border-color:palegoldenrod palevioletred pink paleturquoise;border-50px;} 5 .shape-square1{100px;height:100px;background: #000;border-top-left-radius:50px;} 6 .shape-square2{100px;height:100px;background: #000;border-top-left-radius:60px;border-bottom-right-radius: 60px;} 7 .shape-square3{100px;height:100px;background: #000;border-top-left-radius:50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;} 8 .shape-square4{100px;height:100px;background: #000;border-top-right-radius:50px;border-bottom-right-radius: 50px;} 9 .shape-square5{100px;height:100px;background: #000;border-radius: 50px;} 10 .shape-square6{100px;height:100px;background: #000;} 11 .shape-square7{100px;height:100px;background: #000;-webkit-transform:rotate(45deg);} 12 .shape-square8{border-top:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #000;60px;height:0;position: relative;top:-60px;} 13 .shape-square8:after{position:absolute;top: 20px;left: -20px; 0;height: 0;border-top:70px solid #000;border-bottom:0;border-left:50px solid transparent;border-right:50px solid transparent;content:"";} 14 .shape-square9{0;height:0;border-style: solid;border-0 25px 60px 25px;border-color:transparent transparent #000 transparent;position: relative;top:-50px;} 15 .shape-square9:after{content:"";0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-60px 25px 0 25px;position: absolute;left:-25px;top:60px;} 16 .shape-square10{60px;height:60px;border-top:20px solid transparent;border-right:20px solid transparent;border-left:20px solid #000;border-bottom:20px solid #000;border-radius: 50%;-webkit-animation:rotateA 1.2s infinite linear;} 17 .shape-square11{100px;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:0;border-bottom:100px solid #000;} 18 .shape-square12{0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-0 45px 50px 45px;position: relative;top:-56px;} 19 .shape-square12:after{content:"";50px;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-50px 20px 0 20px;position: absolute;top:50px;left:-45px;} 20 .shape-square13{100px;height:50px;background: #000;position: relative;} 21 .shape-square13:before{content:"";0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-0 50px 30px 50px;position: absolute;top:-30px;left:0;} 22 .shape-square13:after{content:"";0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-30px 50px 0 50px;position: absolute;top:50px;left:0;} 23 .shape-square14{100px;height:50px;background: #000000;position: relative;} 24 .shape-square14:before{content:"";40px;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-0 30px 30px 30px;position: absolute;top:-30px;left:0;} 25 .shape-square14:after{content:"";40px;height:0;border-style: solid;border-color: #000 transparent transparent transparent;border-30px 30px 0 30px;position: absolute;top:50px;left:0;} 26 .shape-square15{100px;height:40px;background: #000;} 27 .shape-square16{80px;height: 40px;background: #000;position:relative;} 28 .shape-square16:before{content:"";border-style: solid;border-color:#000 transparent transparent transparent;border-40px 0 0 20px;position: absolute;top:0;left:-20px;} 29 .shape-square16:after{content:"";border-style: solid;border-color:transparent transparent #000 transparent;border-0 20px 40px 0;position: absolute;top:0;left:80px;} 30 .shape-square17{80px;height:40px;background: #000;position: relative;} 31 .shape-square17:before{content:"";border-style: solid;border-color:transparent transparent #000 transparent;border-0 0 40px 20px;position: absolute;top:0;left:-20px;} 32 .shape-square17:after{content:"";border-style: solid;border-color:#000 transparent transparent transparent;border-40px 20px 0 0;position: absolute;top:0;left:80px;} 33 .shape-square18{50px;height:80px;background: #000;-webkit-transform:rotate(-45deg);border-top-left-radius: 40px;border-top-right-radius: 40px;position: relative;} 34 .shape-square18:after{content:"";50px;height:80px;background: #000;-webkit-transform:rotate(90deg);border-top-left-radius: 40px;border-top-right-radius: 40px;position: absolute;left:15px;top:15px;} 35 .shape-square19{0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-0 50px 100px 50px;} 36 .shape-square20{0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-100px 50px 0 50px;} 37 .shape-square21{0;height:0;border-style: solid;border-color:transparent transparent transparent #000;border-50px 0 50px 100px;} 38 .shape-square22{0;height:0;border-style: solid;border-color:transparent #000 transparent transparent;border-50px 100px 50px 0;} 39 .shape-square23{0;height:0;border-style: solid;border-color: #000 transparent transparent transparent;border-100px 0 0 100px;} 40 .shape-square24{0;height:0;border-style: solid;border-color: #000 transparent transparent transparent;border-100px 100px 0 0;} 41 .shape-square25{0;height:0;border-style: solid;border-color: transparent transparent #000 transparent;border-0 100px 100px 0;} 42 .shape-square26{0;height:0;border-style: solid;border-color: transparent transparent #000 transparent;border-0 0 100px 100px;} 43 .shape-square27:before{content:"";0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-0 40px 30px 40px;position:absolute;top:-30px;left:-25px;} 44 .shape-square27{30px;height:60px;background: #000;position:relative;} 45 .shape-square28{30px;height:60px;background: #000;position:relative;top:-30px;} 46 .shape-square28:after{content:"";0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-30px 40px 0 40px;position: absolute;top:60px;left:-25px;} 47 .shape-square29{60px ;height:30px;background: #000;position: relative;left:20px;top:-30px;} 48 .shape-square29:before{content:"";0;height:0;border-style: solid;border-color:transparent #000 transparent transparent;border-40px 30px 40px 0;position: absolute;top:-25px;left:-30px;} 49 .shape-square30{60px ;height:30px;background: #000;position: relative;left:20px;top:-30px;} 50 .shape-square30:after{content:"";0;height:0;border-style: solid;border-color:transparent transparent transparent #000;border-40px 0 40px 30px;position: absolute;top:-25px;left:60px;} 51 .shape-square31{100px;height:50px;background:#000;border-radius:50%;}/*画椭圆；*/ 52 .shape-square32{100px;height:50px;background: #000;border-top-left-radius: 50px;border-top-right-radius: 50px;} 53 .shape-square33{100px;height:50px;background: #000;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;} 54 .shape-square34{50px;height:100px;background: #000;border-top-left-radius: 50px;border-bottom-left-radius: 50px;} 55 .shape-square35{50px;height:100px;background: #000;border-top-right-radius: 50px;border-bottom-right-radius: 50px;} 56 .shape-square36{100px;height:100px;background: #000;border-top-left-radius: 100%;} 57 .shape-square37{100px;height:100px;background: #000;border-top-right-radius: 100%;} 58 .shape-square38{100px;height:100px;background: #000;border-bottom-right-radius: 100%;} 59 .shape-square39{100px;height:100px;background: #000;border-bottom-right-radius: 100%;} 60 .shape-square40{100px;height:100px;background: #000;border-radius: 50px;position: relative;} 61 .shape-square40:before{content:"";50px;height:50px;background: #fff;border-top-left-radius: 100%;-webkit-transform:rotate(45deg);position: absolute;top:-12px;left:25px;} 62 .shape-square41{100px;height:100px;background: #000;border-radius: 50px;position: relative;} 63 .shape-square41:before{content:"";50px;height:50px;background: #fff;border-top-left-radius: 100%;-webkit-transform:rotate(135deg);position: absolute;top:25px;left:61px;} 64 .shape-square42{100px;height:100px;background: #000;border-radius: 50px;position: relative;} 65 .shape-square42:before{content:"";50px;height:50px;background: #fff;border-top-left-radius: 100%;-webkit-transform:rotate(-45deg);position: absolute;top:25px;left:-12px;} 66 .shape-square43{100px;height:100px;background: #000;border-radius: 50px;position: relative;} 67 .shape-square43:before{content:"";50px;height:50px;background: #fff;border-top-left-radius: 100%;-webkit-transform:rotate(-135deg);position: absolute;top:62px;left:25px;} 68 .shape-square44{100px;height:100px;background: #000;position: relative;border-radius:25px;-webkit-animation:rotateA 3s infinite linear;} 69 .shape-square44:before{content:"";100px;height:100px;background: #000;-webkit-transform:rotate(45deg);position: absolute;border-radius: 25px;} 70 .shape-square45{0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-0 50px 80px 50px;position: relative;} 71 .shape-square45:after{content:"";0;height:0;border-style: solid;border-color:#000 transparent transparent transparent;border-80px 50px 0 50px;position:absolute;top:25px;left:-50px;} 72 .shape-square46{100px;height:100px;background: #000;position: relative;} 73 .shape-square46:before{content:"";background: #000;100px;height:100px;position: absolute;-webkit-transform:rotate(-30deg);} 74 .shape-square46:after{content:"";background: #000;100px;height:100px;position: absolute;-webkit-transform:rotate(-60deg);} 75 .shape-square47{background: #000;40px;height:100px;-webkit-transform:rotate(-45deg);position: relative} 76 .shape-square47:after{content:"";background: #000;40px;height:100px;-webkit-transform:rotate(90deg);position: absolute;} 77 .shape-square48{background: #000;40px;height:100px;-webkit-transform:rotate(-45deg);position: relative;border-radius: 20px;} 78 .shape-square48:after{content:"";background: #000;40px;height:100px;-webkit-transform:rotate(90deg);position: absolute;border-radius: 20px;} 79 .shape-square49{background: #000;40px;height:100px;position: relative} 80 .shape-square49:after{content:"";background: #000;40px;height:100px;-webkit-transform:rotate(90deg);position: absolute;} 81 .shape-square50{background: #000;40px;height:100px;position: relative;border-radius: 20px;} 82 .shape-square50:after{content:"";background: #000;40px;height:100px;-webkit-transform:rotate(90deg);position: absolute;border-radius: 20px;} 83 .shape-square51{30px;height:30px;border:10px solid #000;border-radius: 50%;position: relative;} 84 .shape-square51:after{content:"";background: #000;10px;height:50px;-webkit-transform:rotate(-45deg);position: absolute;top:20px;left:38px;} 85 .shape-square52{20px;height:20px;border:20px solid #000;border-radius: 50%;position: relative;} 86 .shape-square52:after{content:"";border-style: solid;border-color:#000 transparent transparent transparent;border-30px 20px 0 20px;position: absolute;top:31px;left:-10px;} 87 .shape-square53{background: #000;100px;height:60px;border-radius: 10px;position: relative;} 88 .shape-square53:after{content:"";0;height:0;border-style: solid;border-color:transparent #000 transparent transparent;border-10px 15px 10px 0;position: absolute;top:20px;left:-15px;} 89 .shape-square54{96px;height:49px;background:#fff;border-color:#000;border-style: solid;border-2px 2px 50px 2px;border-radius:100%;position: relative;-webkit-animation:rotateA 1.2s infinite linear;} 90 .shape-square54:before{content:"";12px;height:12px;border-radius: 50%;background:#fff; position: absolute;top:25px;left:0px;border:18px solid #000;} 91 .shape-square54:after{content:"";12px;height:12px;background: #000;border:18px solid #fff;border-radius: 50%;position: absolute;top:25px;left:48px;} 92 .shape-square55{50px;height:100px;background: #000;position: relative;} 93 .shape-square55:after{content:"";0;height:0;border-style: solid;border-color: transparent transparent #fff transparent;border-0 25px 30px 25px;position: absolute;top:70px;} 94 .shape-square56{50px;height:80px;background: #fff;border-color:#000;border-20px 10px 20px 10px;border-style: solid;border-radius: 4px;position: relative;} 95 .shape-square56:before{content:"";20px;height:3px;background: #fff;position: absolute;top:-10px;left:15px;} 96 .shape-square56:after{content:"";4px;height:4px;background: #fff;border-radius: 2px;position: absolute;top:90px;left:23px;} 97 .shape-square57{100px;height:50px;background: #fff;border-style: solid;border-color:#000;border-6px;border-radius: 4px;position: relative;} 98 .shape-square57:before{content:"";70px;height:40px;background: #000;position: absolute;top:5px;left:5px;} 99 .shape-square57:after{content:"";5px;height:20px;background: #fff;border-style: solid;border-color: #000;border-8px 8px 8px 0;border-top-right-radius:4px;border-bottom-right-radius:4px;position: absolute;top:10px;left:106px;} 100 .shape-square58{100px;height:100px;background: #000;-webkit-transform:rotate(45deg);border-top-left-radius: 75px;border-bottom-right-radius: 75px;position: relative;} 101 .shape-square58:after{content:"";25px;height:25px;background: #000;border-style: solid;border-color: #fff;border-25px;border-radius:100%;position: absolute;top:13px;left:12px;-webkit-transform:rotate(45deg);} 102 .shape-square59{position: relative;color:#000;0;height:0;border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:70px solid #000;-webkit-transform:rotate(35deg);} 103 .shape-square59:before{content:"";0; height:0; border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:80px solid #000;position: absolute;top:-45px;left:-65px;-webkit-transform:rotate(-35deg);} 104 .shape-square59:after{content:"";0;height:0;border-style: solid;border-color:transparent transparent #000 transparent;border-0 100px 70px 100px;position: absolute;top:3px;left:-105px;-webkit-transform:rotate(-70deg);} 105 .shape-square60{212px;height:100px;position: relative;} 106 .shape-square60:before{content:"";top:0;left:0;position: absolute;60px;height:60px;border-radius: 50px 50px 0 50px;border:20px solid #000;-webkit-transform:rotate(-40deg);} 107 .shape-square60:after{content:"";position: absolute;top:0;left:112px;60px;height:60px;border:20px solid #000;border-radius: 50px 50px 0 50px;-webkit-transform:rotate(130deg);}