css3绘制各种各样的图标
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0px;padding:0px;} div{margin: 20px;float:left;} /*正方形样式*/ .squareBox{width:100px;height:100px;background:#568EEF;} /*长方形样式*/ .rectangleBox{width:200px;height:100px;background:#568EEF;} /*圆形样式*/ .circleBox{width:100px;height:100px;border-radius:50%;background:#568EEF;} /*椭圆样式*/ .ovalBox{width:200px;height:100px;background:#568EEF;border-radius:100px/50px;} /*上三角*/ .triangleBox-up{width:0;height:0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #568EEF;} /*下三角*/ .triangleBox-down{width:0;height:0;border-left: 50px solid transparent; border-right: 50px solid transparent;border-top: 100px solid #568EEF;} /*左三角*/ .triangleBox-left{width:0;height:0;border-top: 50px solid transparent;border-right: 100px solid #568EEF;border-bottom:50px solid transparent;} /*右三角*/ .triangleBox-right{width:0;height:0;border-top:50px solid transparent;border-left: 100px solid #568EEF;border-bottom: 50px solid transparent;} /*左上三角*/ .triangleBox-topleft{width:0;height:0;border-top:100px solid #568EEF;border-right: 100px solid transparent;} /*右上三角*/ .triangleBox-topright{width:0;height:0;border-top:100px solid #568EEF;border-left: 100px solid transparent;} /*左下三角*/ .triangleBox-bottomleft{width:0;height:0;border-bottom: 100px solid #568EEF;border-right: 100px solid transparent;} /*右下三角*/ .triangleBox-bottomright{width:0;height:0;border-bottom: 100px solid #568EEF;border-left: 100px solid transparent;} /*平行四边形*/ .parallelogramBox{width:150px;height:100px;margin-left:20px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform:skew(20deg);background:#568EEF;} /*梯形*/ .trapezoidBox{height:0;width:100px;border-bottom: 100px solid #568EEF;border-left: 50px solid transparent;border-right: 50px solid transparent;} /*五角星*/ .star-five{margin: 50px 0;position:relative;display: block;color: #568EEF;width: 0px;height: 0px;border-right:100px solid transparent;border-bottom: 70px solid #568EEF;border-left: 100px solid transparent; -webkit-transform: rotate(35deg);} .star-five:before{border-bottom: 80px solid #568EEF;border-left: 30px solid transparent;border-right: 30px solid transparent;position:absolute;height:0;width:0;top:-45px;left: -65px; display: block; content: '';-webkit-transform: rotate(-35deg);} .star-five:after{position: absolute;display: block;color: #568EEF;top: 3px;left: -105px;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid #568EEF; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg);content: ''; } /*六角星*/ .star-six{width:0;height:0;border-left: 50px solid transparent;border-right:50px solid transparent;border-bottom: 100px solid #568EEF;position: relative; } .star-six:after {width: 0;height: 0;border-left: 50px solid transparent;border-right:50px solid transparent;border-top: 100px solid #568EEF;position: absolute;content: "";top: 30px;left: -50px; } /*八角星*/ .burst-8{background:#568EEF;width:80px;height:80px;position:relative;text-align: center;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-ms-transform: rotate(20deg);-o-transform:rotate(20eg);transform:rotate(20deg);} .burst-8:before{content: "";position:absolute;top: 0;left: 0;height: 80px;width: 80px;background: #568EEF;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg); } /*十二角星*/ .burst-12{background:#568EEF;width:80px;height:80px;position:relative;text-align: center;} .burst-12:before,.burst-12:after{content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: #568EEF; } .burst-12:before{-webkit-transform:rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);} .burst-12:after{-webkit-transform: rotate(60deg);-moz-transform: rotate(60deg);-ms-transform: rotate(60deg);-o-transform: rotate(60deg);transform: rotate(60deg); } /*五边形*/ .pentagon{position:relative;width:54px;border-width:50px 18px 0;border-style:solid;border-color: #568EEF transparent; } .pentagon:before {content: "";position:absolute;height:0;width:0;top:-85px;left: -18px; border-width:0 45px 35px;border-style: solid;border-color: transparent transparent #568EEF; } /*六边形*/ .hexagon{width:100px;height:55px;background:#568EEF;position: relative; } .hexagon:before{content: "";position:absolute;top:-25px;left:0;width:0;height:0;border-left:50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid #568EEF;} .hexagon:after{content: "";position:absolute;bottom:-25px;left:0;width:0;height:0;border-left: 50px solid transparent;border-right:50px solid transparent;border-top:25px solid #568EEF; } /*八边形*/ .octagon{width: 100px;height: 100px;background: #568EEF;position: relative; } .octagon:before {content: "";position: absolute;top: 0;left: 0;border-bottom: 29px solid #568EEF;border-left:29px solid #eee;border-right: 29px solid #eee;width:42px; height:0; } .octagon:after{content: "";position: absolute;bottom:0;left:0;border-top:29px solid #568EEF;border-left: 29px solid #eee;border-right: 29px solid #eee;width:42px;height:0;} /*爱心*/ .heart{position:relative;width:100px;height:90px; } .heart:before,.heart:after{position:absolute;content: "";left: 50px;top:0;width:50px;height:80px;background: #568EEF;border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-webkit-transform-origin:0 100%;transform-origin: 0 100%; } .heart:after{left:0; -webkit-transform: rotate(45deg); -webkit-transform-origin: 100% 100%;} /*钻石*/ .cut-diamond {border-style:solid;border-color:transparent transparent #568EEF transparent;border-width:0 25px 25px 25px;height:0;width: 50px;position: relative;margin:20px 0 50px 0;} .cut-diamond:after{content: "";position: absolute;top: 25px;left:-25px;width:0;height:0;border-style: solid;border-color:#568EEF transparent transparent transparent;border-width:70px 50px 0 50px;} /*无穷大*/ .infinity{position:relative;width:212px;height:100px;} .infinity:before,.infinity:after{content: "";position: absolute;top:0;left:0;width:60px;height:60px;border: 20px solid #568EEF; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); } .infinity:after{left: auto;right:0;-moz-border-radius:50px 50px 50px 0;border-radius:50px 50px 50px 0;-webkit-transform: rotate(45deg); } /*鸡蛋*/ .egg{display:block;width:126px;height:180px;background-color:#568EEF; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; } /*食豆人*/ .pacman{width:0px;height:0px;border-right:60px solid transparent;border-top:60px solid #568EEF;border-left:60px solid #568EEF;border-bottom:60px solid #568EEF;border-top-left-radius: 60px;border-top-right-radius:60px;border-bottom-left-radius:60px;border-bottom-right-radius: 60px; } /*对话框*/ .talkbubble{width:120px;height:80px;background:#568EEF;position: relative; -moz-border-radius:10px; -webkit-border-radius:10px;border-radius:10px; } .talkbubble:before{content:"";position: absolute;right: 100%;top: 26px;width: 0;height: 0; border-top: 13px solid transparent;border-right: 26px solid #568EEF;border-bottom: 13px solid transparent; } /*阴阳八卦*/ .yin-yang{width:96px;height: 48px;background: #eee;border-color: #568EEF;border-style: solid;border-width: 2px 2px 50px 2px;border-radius:100%;position:relative;} .yin-yang:before{content: "";position:absolute;top:50%;left:0;background:#eee;border:18px solid #568EEF;border-radius:100%;width:12px;height:12px; } .yin-yang:after{content:"";position: absolute;top:50%;left:50%;background:#568EEF;border:18px solid #eee;border-radius:100%;width:12px;height:12px; } </style> </head> <body> <div class="squareBox"></div> <div class="rectangleBox"></div> <div class="circleBox"></div> <div class="ovalBox"></div> <div class="triangleBox-up"></div> <div class="triangleBox-down"></div> <div class="triangleBox-left"></div> <div class="triangleBox-right"></div> <div class="triangleBox-topleft"></div> <div class="triangleBox-topright"></div> <div class="triangleBox-bottomleft"></div> <div class="triangleBox-bottomright"></div> <div class="parallelogramBox"></div> <div class="trapezoidBox"></div> <div class="star-five"></div> <div class="star-six"></div> <div class="burst-8"></div> <div class="burst-12"></div> <div class="pentagon"></div> <div class="hexagon"></div> <div class="octagon"></div> <div class="heart"></div> <div class="cut-diamond"></div> <div class="infinity"></div> <div class="egg"></div> <div class="pacman"></div> <div class="talkbubble"></div> <div class="yin-yang"></div> </body> </html>
DO What You Want !