标签：
1.心形
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>xin</title> 6 <style type="text/css"> 7 #myt{ 8 width: 800px; 9 height: 350px; 10 margin: auto; 11 position: relative; 12 } 13 #heart{ 14 width: 350px; 15 height: 500px; 16 position: relative; 17 } 18 #heart:before,#heart:after{ 19 content: ""; 20 width: 150px; 21 height: 225px; 22 background: red; 23 position: absolute; 24 left: 150px; 25 top: 80px; 26 border-radius: 75px 75px 0 0; 27 -moz-border-radius: 75px 75px 0 0; 28 transform:rotate(-45deg); 29 -webkit-transform:rotate(-45deg); 30 -moz-transform:rotate(-45deg); 31 -ms-transform:rotate(-45deg); 32 -o-transform:rotate(-45deg); 33 transform-origin:0% 100%; 34 -webkit-transform-origin:0% 100%; 35 -moz-transform-origin:0% 100%; 36 -ms-transform-origin:0% 100%; 37 -o-transform-origin:0% 100%; 38 } 39 #heart:after{ 40 left: 0; 41 transform:rotate(45deg); 42 -webkit-transform:rotate(45deg); 43 -moz-transform:rotate(45deg); 44 -ms-transform:rotate(45deg); 45 -o-transform:rotate(45deg); 46 transform-origin:100% 100%; 47 -webkit-transform-origin:100% 100%; 48 -moz-transform-origin:100% 100%; 49 -ms-transform-origin:100% 100%; 50 -o-transform-origin:100% 100%; 51 } 52 </style> 53 </head> 54 <body> 55 <div id="myt"> 56 <div id="heart"></div> 57 </div> 58 </body> 59 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>6-star</title> 6 <style type="text/css"> 7 #sixStar{ 8 width: 800px; 9 height: 800px; 10 position: relative; 11 } 12 #sixStar:before,#sixStar:after{ 13 content: ""; 14 width: 0; 15 height: 0; 16 position: absolute; 17 left: 0; 18 border-left: 100px solid transparent; 19 border-right: 100px solid transparent; 20 } 21 #sixStar:before{ 22 top: 58px; 23 border-top: 173px solid #9de; 24 } 25 #sixStar:after{ 26 top: 0px; 27 border-bottom: 173px solid #9de; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="sixStar"></div> 33 </body> 34 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>5-star</title> 6 <style type="text/css"> 7 #fiveStar { 8 margin: 50px 0; 9 position: relative; 10 display: block; 11 color: red; 12 width: 0px; 13 height: 0px; 14 top: 15px; 15 border-right: 100px solid transparent; 16 border-bottom: 70px solid red; 17 border-left: 100px solid transparent; 18 -moz-transform: rotate(35deg); 19 -webkit-transform: rotate(35deg); 20 -ms-transform: rotate(35deg); 21 -o-transform: rotate(35deg); 22 } 23 #fiveStar:before { 24 border-bottom: 80px solid red; 25 border-left: 30px solid transparent; 26 border-right: 30px solid transparent; 27 position: absolute; 28 height: 0; 29 width: 0; 30 top: -45px; 31 left: -65px; 32 display: block; 33 content: ‘‘; 34 -webkit-transform: rotate(-35deg); 35 -moz-transform: rotate(-35deg); 36 -ms-transform: rotate(-35deg); 37 -o-transform: rotate(-35deg); 38 39 } 40 #fiveStar:after { 41 position: absolute; 42 display: block; 43 color: red; 44 top: 3px; 45 left: -105px; 46 width: 0px; 47 height: 0px; 48 border-right: 100px solid transparent; 49 border-bottom: 70px solid red; 50 border-left: 100px solid transparent; 51 -webkit-transform: rotate(-70deg); 52 -moz-transform: rotate(-70deg); 53 -ms-transform: rotate(-70deg); 54 -o-transform: rotate(-70deg); 55 content: ‘‘; 56 } 57 </style> 58 </head> 59 <body> 60 <div id="fiveStar"></div> 61 </body> 62 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>5-edge</title> 6 <style type="text/css"> 7 #pentagon { 8 position: relative; 9 width: 54px; 10 top: 50px; 11 left: 30px; 12 border-width: 50px 18px 0; 13 border-style: solid; 14 border-color: red transparent; 15 } 16 #pentagon:before { 17 content: ""; 18 position: absolute; 19 height: 0; 20 width: 0; 21 top: -85px; 22 left: -18px; 23 border-width: 0 45px 35px; 24 border-style: solid; 25 border-color: transparent transparent red; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="pentagon"></div> 31 </body> 32 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>6-edge</title> 6 <style type="text/css"> 7 #hexagon { 8 width: 100px; 9 height: 55px; 10 background: red; 11 position: relative; 12 top:50px; 13 left: 50px; 14 } 15 #hexagon:before { 16 content: ""; 17 position: absolute; 18 top: -25px; 19 left: 0; 20 width: 0; 21 height: 0; 22 border-left: 50px solid transparent; 23 border-right: 50px solid transparent; 24 border-bottom: 25px solid red; 25 } 26 #hexagon:after { 27 content: ""; 28 position: absolute; 29 bottom: -25px; 30 left: 0; 31 width: 0; 32 height: 0; 33 border-left: 50px solid transparent; 34 border-right: 50px solid transparent; 35 border-top: 25px solid red; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="hexagon"></div> 41 </body> 42 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>octagon</title> 6 <style type="text/css"> 7 #octagon { 8 width: 100px; 9 height: 100px; 10 top:50px; 11 left: 50px; 12 background: red; 13 position: relative; 14 } 15 16 #octagon:before { 17 content: ""; 18 position: absolute; 19 top: 0; 20 left: 0; 21 border-bottom: 29px solid red; 22 border-left: 29px solid #eee; 23 border-right: 29px solid #eee; 24 width: 42px; 25 height: 0; 26 } 27 28 #octagon:after { 29 content: ""; 30 position: absolute; 31 bottom: 0; 32 left: 0; 33 border-top: 29px solid red; 34 border-left: 29px solid #eee; 35 border-right: 29px solid #eee; 36 width: 42px; 37 height: 0; 38 } 39 </style> 40 </head> 41 <body> 42 <div id="octagon"></div> 43 </body> 44 </html>
标签：
原文地址：http://www.cnblogs.com/lightao/p/4319804.html
