css制作的各种图形
1、六角形的制作:
代码:
#star-six{ height:0; width:0; border-bottom:100px solid red; border-left: 50px solid transparent; border-right:50px solid transparent; position: relative; } #star-six:after{ width: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; }
2、五角星的制作:
#star-five{ display: block; position: relative; color:red; width:0; height:0; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:70px solid red; -webkit-transform:rotate(35deg); -moz-transform:rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg); } #star-five:before{ width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:80px solid red; content: ""; display: block; position: absolute; top:-45px; left:-65px; -webkit-transform:rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg); } #star-five:after{ width:0; height:0; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:70px solid red; color:red; display: block; position: absolute; top:3px; left:-105px; content: ""; -webkit-transform:rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-75deg); -o-transform:rotate(-75deg); }
3、五边形的制作:
#pentagon{ border-width:50px 18px 0; border-style:solid; border-color:red transparent; width:54px; position: relative; } #pentagon:before{} #pentagon:after{ border-width:0 45px 35px; border-style: solid; border-color: transparent transparent red; content: ""; width:0; height:0; position: absolute; top:-85px; left:-18px; }
4、八边形的制作:
#octangon{ width:100px; height:100px; background: red; position: relative; } #octangon:before{ width:42px; height:0; content:""; border-left:29px solid #eee; border-right:29px solid #eee; border-bottom: 29px solid red; position: absolute; top:0; left:0; } #octangon:after{ width:42px; height:0; content:""; border-left:29px solid #eee; border-right:29px solid #eee; border-top: 29px solid red; position: absolute; bottom:0; }
5、心形的制作:
#heart{ width:100px; height:90px; position: relative; } #heart:before, #heart:after{ content: ""; position: absolute; background: red; top:0; left:50px; width:50px; height:80px; border-radius: 50px 50px 0 0; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:ratate(-45deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; } #heart:after{ left:0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:ratate(45deg); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%; }
转载地址:http://www.cnblogs.com/lhb25/p/css-and-css3-shapes-a.html