- 正方形:
- 代码:
-
1 <style> 2 .square { 3 width: 100px; 4 height: 100px; 5 background-color: cornflowerblue; 6 } 7 </style> 8 <div class="square "></div>
- 效果:
- 长方形:
- 代码:
-
1 <style> 2 .rectangle { 3 width: 200px; 4 height: 100px; 5 background-color: cornflowerblue; 6 } 7 </style> 8 <div class="rectangle "></div>
-
- 效果:
- 代码:
- 圆形:
- 代码:
1 <style> 2 .circle { 3 width: 100px; 4 height: 100px; 5 background-color: cornflowerblue; 6 -moz-border-radius: 50px; 7 -webkit-border-radius: 50px; 8 border-radius: 50px; 9 } 10 </style> 11 <div class="circle"></div>
- 效果:
- 代码:
- 椭圆:
- 代码:
1 <style> 2 .oval { 3 width: 200px; 4 height: 100px; 5 background-color: cornflowerblue; 6 -moz-border-radius: 100px / 50px; 7 -webkit-border-radius: 100px / 50px; 8 border-radius: 100px / 50px; 9 } 10 </style> 11 <div class="oval "></div>
- 效果:
- 代码:
- 上三角:
- 代码:
1 <style> 2 .triangle-up{ 3 width: 0; 4 height: 0; 5 border-left: 50px solid transparent; 6 border-right: 50px solid transparent; 7 border-bottom: 100px solid cornflowerblue; 8 } 9 </style> 10 <div class="triangle-up"></div>
- 效果:
- 代码:
- 下三角:
- 代码:
1 <style> 2 .triangle-down{ 3 width: 0; 4 height: 0; 5 border-left: 50px solid transparent; 6 border-right: 50px solid transparent; 7 border-top: 100px solid cornflowerblue; 8 } 9 </style> 10 <div class="triangle-down"></div>
- 效果:
- 代码:
- 左三角:
- 代码:
1 <style> 2 .triangle-left{ 3 width: 0; 4 height: 0; 5 border-top: 50px solid transparent; 6 border-right: 100px solid cornflowerblue; 7 border-bottom: 50px solid transparent; 8 } 9 </style> 10 <div class="triangle-left"></div>
- 效果:
- 代码:
- 右上角:
- 代码:
1 <style> 2 .triangle-right{ 3 width: 0; 4 height: 0; 5 border-top: 50px solid transparent; 6 border-left: 100px solid cornflowerblue; 7 border-bottom: 50px solid transparent; 8 } 9 </style> 10 <div class="triangle-right"></div>
- 效果:
- 代码:
- 左上三角:
- 代码:
1 <style> 2 .triangle-topleft{ 3 width: 0; 4 height: 0; 5 border-top: 100px solid cornflowerblue; 6 border-right: 100px solid transparent; 7 } 8 </style> 9 <div class="triangle-topleft"></div>
- 效果:
- 代码:
- 右上三角:
- 代码:
1 <style> 2 .triangle-topright{ 3 width: 0; 4 height: 0; 5 border-top: 100px solid cornflowerblue; 6 border-left: 100px solid transparent; 7 } 8 </style> 9 <div class="triangle-topright"></div>
- 效果:
- 代码:
- 左下三角:
- 代码:
1 <style> 2 .triangle-bottomleft{ 3 width: 0; 4 height: 0; 5 border-bottom: 100px solid cornflowerblue; 6 border-right: 100px solid transparent; 7 } 8 </style> 9 <div class="triangle-bottomleft"></div>
- 效果:
- 代码:
- 右下三角:
- 代码:
1 <style> 2 .triangle-bottomright{ 3 width: 0; 4 height: 0; 5 border-bottom: 100px solid cornflowerblue; 6 border-left: 100px solid transparent; 7 } 8 </style> 9 <div class="triangle-bottomright"></div>
- 效果:
- 代码:
- 平行四边形:
- 代码:
1 <style> 2 .parallelogram{ 3 width: 150px; 4 height: 100px; 5 -webkit-transform: skew(20deg); 6 -moz-transform: skew(20deg); 7 -o-transform: skew(20deg); 8 background: cornflowerblue; 9 } 10 </style> 11 <div class="parallelogram"></div>
- 效果:
- 代码:
- 梯形:
- 代码:
1 <style> 2 .trapezoid { 3 border-bottom: 100px solid cornflowerblue; 4 border-left: 50px solid transparent; 5 border-right: 50px solid transparent; 6 height: 0; 7 width: 100px; 8 } 9 </style> 10 <div class="trapezoid"></div>
- 效果:
- 代码:
- 六角星:
- 代码:
1 <style> 2 .star-six { 3 width: 0; 4 height: 0; 5 border-left: 50px solid transparent; 6 border-right: 50px solid transparent; 7 border-bottom: 100px solid cornflowerblue; 8 position: relative; 9 } 10 .star-six:after { 11 width: 0; 12 height: 0; 13 border-left: 50px solid transparent; 14 border-right: 50px solid transparent; 15 border-top: 100px solid cornflowerblue; 16 position: absolute; 17 content: ""; 18 top: 30px; 19 left: -50px; 20 } 21 </style> 22 <div class="star-six"></div>
- 效果:
- 代码:
- 五角星:
- 代码:
1 <style> 2 .star-five { 3 position: relative; 4 display: block; 5 color: cornflowerblue; 6 width: 0px; 7 height: 0px; 8 border-right: 100px solid transparent; 9 border-bottom: 70px solid cornflowerblue; 10 border-left: 100px solid transparent; 11 -moz-transform: rotate(35deg); 12 -webkit-transform: rotate(35deg); 13 -ms-transform: rotate(35deg); 14 -o-transform: rotate(35deg); 15 } 16 17 .star-five:before { 18 border-bottom: 80px solid cornflowerblue; 19 border-left: 30px solid transparent; 20 border-right: 30px solid transparent; 21 position: absolute; 22 height: 0; 23 width: 0; 24 top: -45px; 25 left: -65px; 26 display: block; 27 content: ''; 28 -webkit-transform: rotate(-35deg); 29 -moz-transform: rotate(-35deg); 30 -ms-transform: rotate(-35deg); 31 -o-transform: rotate(-35deg); 32 } 33 34 .star-five:after { 35 position: absolute; 36 display: block; 37 color: cornflowerblue; 38 top: 3px; 39 left: -105px; 40 width: 0px; 41 height: 0px; 42 border-right: 100px solid transparent; 43 border-bottom: 70px solid cornflowerblue; 44 border-left: 100px solid transparent; 45 -webkit-transform: rotate(-70deg); 46 -moz-transform: rotate(-70deg); 47 -ms-transform: rotate(-70deg); 48 -o-transform: rotate(-70deg); 49 content: ''; 50 } 51 </style> 52 <div class="star-five"></div>
- 效果:
- 代码:
- 五角大楼:
- 代码:
1 <style> 2 .pentagon { 3 position: relative; 4 width: 54px; 5 border-width: 50px 18px 0; 6 border-style: solid; 7 border-color: cornflowerblue transparent; 8 } 9 .pentagon:before { 10 content: ""; 11 position: absolute; 12 height: 0; 13 width: 0; 14 top: -85px; 15 left: -18px; 16 border-width: 0 45px 35px; 17 border-style: solid; 18 border-color: transparent transparent cornflowerblue; 19 } 20 </style> 21 <div class="pentagon"></div>
- 效果:
- 代码:
- 六边形:
- 代码:
1 <style> 2 .hexagon{ 3 width: 100px; 4 height: 55px; 5 background: cornflowerblue; 6 position: relative; 7 } 8 .hexagon:before{ 9 content: ""; 10 position: absolute; 11 top: -25px; 12 left: 0; 13 width: 0; 14 height: 0; 15 border-left: 50px solid transparent; 16 border-right: 50px solid transparent; 17 border-bottom: 25px solid cornflowerblue; 18 } 19 .hexagon:after{ 20 content: ""; 21 position: absolute; 22 bottom: -25px; 23 left: 0; 24 width: 0; 25 height: 0; 26 border-left: 50px solid transparent; 27 border-right: 50px solid transparent; 28 border-top: 25px solid cornflowerblue; 29 } 30 </style> 31 <div class="hexagon"></div>
- 效果:
- 代码:
- 八角形:
- 代码:
1 <style> 2 .octagon { 3 width: 100px; 4 height: 100px; 5 background: cornflowerblue; 6 position: relative; 7 } 8 .octagon:before { 9 content: ""; 10 position: absolute; 11 top: 0; 12 left: 0; 13 border-bottom: 29px solid cornflowerblue; 14 border-left: 29px solid #eee; 15 border-right: 29px solid #eee; 16 width: 42px; 17 height: 0; 18 } 19 .octagon:after { 20 content: ""; 21 position: absolute; 22 bottom: 0; 23 left: 0; 24 border-top: 29px solid cornflowerblue; 25 border-left: 29px solid #eee; 26 border-right: 29px solid #eee; 27 width: 42px; 28 height: 0; 29 } 30 </style> 31 <div class="octagon"></div>
- 效果:
- 代码:
- 爱心:
- 代码:
1 <style> 2 .heart { 3 position: relative; 4 width: 100px; 5 height: 90px; 6 } 7 .heart:before, 8 .heart:after { 9 position: absolute; 10 content: ""; 11 left: 50px; 12 top: 0; 13 width: 50px; 14 height: 80px; 15 background: cornflowerblue; 16 -moz-border-radius: 50px 50px 0 0; 17 border-radius: 50px 50px 0 0; 18 -webkit-transform: rotate(-45deg); 19 -moz-transform: rotate(-45deg); 20 -ms-transform: rotate(-45deg); 21 -o-transform: rotate(-45deg); 22 transform: rotate(-45deg); 23 -webkit-transform-origin: 0 100%; 24 -moz-transform-origin: 0 100%; 25 -ms-transform-origin: 0 100%; 26 -o-transform-origin: 0 100%; 27 transform-origin: 0 100%; 28 } 29 .heart:after { 30 left: 0; 31 -webkit-transform: rotate(45deg); 32 -moz-transform: rotate(45deg); 33 -ms-transform: rotate(45deg); 34 -o-transform: rotate(45deg); 35 transform: rotate(45deg); 36 -webkit-transform-origin: 100% 100%; 37 -moz-transform-origin: 100% 100%; 38 -ms-transform-origin: 100% 100%; 39 -o-transform-origin: 100% 100%; 40 transform-origin :100% 100%; 41 } 42 </style> 43 <div class="heart"></div>
- 效果:
- 代码:
- 无穷大符号:
- 代码:
1 <style> 2 .infinity { 3 position: relative; 4 width: 212px; 5 height: 100px; 6 } 7 .infinity:before, 8 .infinity:after { 9 content: ""; 10 position: absolute; 11 top: 0; 12 left: 0; 13 width: 60px; 14 height: 60px; 15 border: 20px solid cornflowerblue; 16 -moz-border-radius: 50px 50px 0 50px; 17 border-radius: 50px 50px 0 50px; 18 -webkit-transform: rotate(-45deg); 19 -moz-transform: rotate(-45deg); 20 -ms-transform: rotate(-45deg); 21 -o-transform: rotate(-45deg); 22 transform: rotate(-45deg); 23 } 24 .infinity:after { 25 left: auto; 26 right: 0; 27 -moz-border-radius: 50px 50px 50px 0; 28 border-radius: 50px 50px 50px 0; 29 -webkit-transform: rotate(45deg); 30 -moz-transform: rotate(45deg); 31 -ms-transform: rotate(45deg); 32 -o-transform: rotate(45deg); 33 transform: rotate(45deg); 34 } 35 </style> 36 <div class="infinity"></div>
- 效果:
- 代码:
- 鸡蛋:
- 代码:
1 <style> 2 .egg { 3 display:block; 4 width: 126px; 5 height: 180px; 6 background-color: cornflowerblue; 7 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 8 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 9 } 10 </style> 11 <div class="egg"></div>
- 效果:
- 代码:
- 食逗人(Pac-Man):
- 代码:
1 <style> 2 .pacman { 3 width: 0px; 4 height: 0px; 5 border-right: 60px solid transparent; 6 border-top: 60px solid cornflowerblue; 7 border-left: 60px solid cornflowerblue; 8 border-bottom: 60px solid cornflowerblue; 9 border-top-left-radius: 60px; 10 border-top-right-radius: 60px; 11 border-bottom-left-radius: 60px; 12 border-bottom-right-radius: 60px; 13 } 14 </style> 15 <div class="pacman"></div>
- 效果:
- 代码:
- 提示对话框:
- 代码:
1 <style> 2 .talkbubble { 3 width: 120px; 4 height: 80px; 5 background: cornflowerblue; 6 position: relative; 7 -moz-border-radius: 10px; 8 -webkit-border-radius: 10px; 9 border-radius: 10px; 10 } 11 .talkbubble:before { 12 content:""; 13 position: absolute; 14 right: 100%; 15 top: 26px; 16 width: 0; 17 height: 0; 18 border-top: 13px solid transparent; 19 border-right: 26px solid cornflowerblue; 20 border-bottom: 13px solid transparent; 21 } 22 </style> 23 <div class="talkbubble"></div>
- 效果:
- 代码:
- 12角星:
- 代码:
1 <style> 2 .burst-12 { 3 background: cornflowerblue; 4 width: 80px; 5 height: 80px; 6 position: relative; 7 text-align: center; 8 } 9 .burst-12:before, .burst-12:after { 10 content: ""; 11 position: absolute; 12 top: 0; 13 left: 0; 14 height: 80px; 15 width: 80px; 16 background: cornflowerblue; 17 } 18 .burst-12:before { 19 -webkit-transform: rotate(30deg); 20 -moz-transform: rotate(30deg); 21 -ms-transform: rotate(30deg); 22 -o-transform: rotate(30deg); 23 transform: rotate(30deg); 24 } 25 .burst-12:after { 26 -webkit-transform: rotate(60deg); 27 -moz-transform: rotate(60deg); 28 -ms-transform: rotate(60deg); 29 -o-transform: rotate(60deg); 30 transform: rotate(60deg); 31 } 32 </style> 33 <div class="burst-12"></div>
- 效果:
- 代码:
- 8角星:
- 代码:
1 <style> 2 .burst-8 { 3 background: cornflowerblue; 4 width: 80px; 5 height: 80px; 6 position: relative; 7 text-align: center; 8 -webkit-transform: rotate(20deg); 9 -moz-transform: rotate(20deg); 10 -ms-transform: rotate(20deg); 11 -o-transform: rotate(20eg); 12 transform: rotate(20deg); 13 } 14 .burst-8:before { 15 content: ""; 16 position: absolute; 17 top: 0; 18 left: 0; 19 height: 80px; 20 width: 80px; 21 background: cornflowerblue; 22 -webkit-transform: rotate(135deg); 23 -moz-transform: rotate(135deg); 24 -ms-transform: rotate(135deg); 25 -o-transform: rotate(135deg); 26 transform: rotate(135deg); 27 } 28 </style> 29 <div class="burst-8"></div>
- 效果:
- 代码:
- 钻石:
- 代码:
1 <style> 2 .cut-diamond { 3 border-style: solid; 4 border-color: transparent transparent cornflowerblue transparent; 5 border-width: 0 25px 25px 25px; 6 height: 0; 7 width: 50px; 8 position: relative; 9 } 10 .cut-diamond:after { 11 content: ""; 12 position: absolute; 13 top: 25px; 14 left: -25px; 15 width: 0; 16 height: 0; 17 border-style: solid; 18 border-color: cornflowerblue transparent transparent transparent; 19 border-width: 70px 50px 0 50px; 20 } 21 </style> 22 <div class="cut-diamond"></div>
- 效果:
- 代码:
- 阴阳八卦(霸气的这个):
- 代码:
1 <style> 2 .yin-yang { 3 width: 96px; 4 height: 48px; 5 background: #eee; 6 border-color: cornflowerblue; 7 border-style: solid; 8 border-width: 2px 2px 50px 2px; 9 border-radius: 100%; 10 position: relative; 11 } 12 .yin-yang:before { 13 content: ""; 14 position: absolute; 15 top: 50%; 16 left: 0; 17 background: #eee; 18 border: 18px solid cornflowerblue; 19 border-radius: 100%; 20 width: 12px; 21 height: 12px; 22 } 23 .yin-yang:after { 24 content: ""; 25 position: absolute; 26 top: 50%; 27 left: 50%; 28 background: cornflowerblue; 29 border: 18px solid #eee; 30 border-radius:100%; 31 width: 12px; 32 height: 12px; 33 } 34 </style> 35 <div class="yin-yang"></div>
- 效果:
- 代码: