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 !
浙公网安备 33010602011771号