虽然我们现在大多使用字体图标或者svg图片，使用CSS制作图标似乎意义不大，但是实现这些图标的一些技巧和思路还是值得学习的。1.Solidcircle.circle{width:120px;高度：120px；背景：#8BC34A；border-radius:100%;}2.Ring(空心圆).ring{width:100px;高度：100px；边框：10px实心#8BC34A；border-radius:100%;}3.Ellipse.ellipsis{width:200px;高度：120px；背景：#8BC34A；border-radius:100px/60px;}4.Semicircle.top-semicircle{width:120px;高度：60px；背景：#8BC34A；border-radius:60px60px0px0px;}.right-semicircle{width:60px;高度：120px；背景：#8BC34A；底部半圆{宽度：120px；高度：60px；背景：#8BC34A；border-radius:0060px60px;}.left-semicircle{width:60px;高度：120px；背景：#8BC34A；0060px;}五、四分之一圆（扇形）.toplf-sector,.toprt-sector,.bottomlf-sector,.bottomrt-sector{width:60px;高度：60px；背景：#8BC34A;}.toplf-sector{border-radius:60px000;}.toprt-sector{border-radius:060px00;}.bottomlf-sector{border-radius:00060px;}.bottomrt-sector{border-radius:0060px0;}六、心形.heart-shaped{width:80px;高度：80px；背景：#8BC34A；位置：相对；变换：旋转（45度）；}.heart-shaped::before{内容：“”；宽度：40px；高度：80px；背景：#8BC34A；边界半径：40px0040px；位置：绝对；正确：99%；top:0;}.heart-shaped::after{content:"";宽度：80px；高度：40px；背景：#8BC34A；边框半径：40px40px00；位置：绝对；左：0；bottom:99%;}七、鸡蛋.egg{width:150px;高度：200px；背景：#8BC34A；border-radius:75px75px75px75px/130px130px70px70px;}八、太极八卦阵图.taiji{width:140px;高度：70px；边框：2px实心#8BC34A；border-bottom:70pxsolid#8BC34A;边界半径：100%；位置：相对；}.taiji::before{内容：“”；位置：绝对；左：0；顶部：50%；宽度：20px；高度：20px；背景：#fff；边框：25px实心#8BC34A；border-radius:100%;}.taiji::after{content:"";位置：绝对；右：0；顶部：50%；宽度：20px；高度：20px；背景：#8BC34A；边框：25px实心#fff；border-radius:100%;}九、叶子（花瓣）.leaf1{width:80px;高度：80px；背景：#8BC34A；border-radius:080px;}.leaf2{width:80px;高度：80px；背景：#8BC34A；border-radius:40px40px040px;}十、五叶花瓣.five-flower{position:relative;宽度：300px；height:280px;}.five-flower.petal{display:block;宽度：120px；高度：120px；背景：#8BC34A；边界半径：0120px；位置：绝对；transform-origin:100%100%;}.five-flower.petal1{transform:rotate(72deg);}.five-flower.petal2{transform:rotate(144deg);}.five-flower.petal3{transform:rotate(216deg);}.five-flower.petal4{transform:rotate(288deg);}十一、牵牛花.qiannuhua{position:relative;宽度：200px；高度：200px；margin-left:140px;}.qiannuhua.petal{display:block;宽度：120px；高度：120px；背景：#8BC34A；边界半径：0120px；位置：绝对；transform-origin:0%100%}.qiannuhua.petal1{transform:rotate(72deg);}.qiannuhua.petal2{transform:rotate(144deg);}.qiannuhua.petal3{transform:rotate(216deg);}.qiannuhua.petal4{transform:rotate(288deg);}十二、风车.fengche{position:relative;宽度：200px；height:200px;}.fengche.petal{display:block;宽度：120px；高度：120px；背景：#8BC34A；边界半径：0120px；位置：绝对；transform-origin:30%100%}.fengche.petal1{transform:rotate(72deg);}.fengche.petal2{transform:rotate(144deg);}.fengche.petal3{transform:rotate(216deg);}.fengche.petal4{transform:rotate(288deg);}十四、小尾巴.xwb1{width:20px;高度：30px；border-left:8pxsolid#8BC34A;border-radius:30px000;}十五、箭头.xwb2{width:0;高度：0；border-bottom:10pxsolid#8BC34A;border-left:10pxsolidtransparent;位置：相对；变换：旋转（8度）；}.xwb2::after{内容：“”；宽度：20px；高度：18px；border-right:5pxsolid#8BC34A;边界半径：0px40px00；位置：绝对；左：-30px；底部：-15px；transform:rotate(-45deg);}十六、月光.moon{width:80px;高度：120px；border-left:40pxsolid#8BC34A;border-radius:60px;}十六、三角形.triangle-bot{width:0;高度：0；边框：40px实心透明；border-bottom-color:#8BC34A;}.triangle-top{宽度:0;高度：0；边框：40px实心透明；border-top-color:#8BC34A;}.triangle-lf{width:0;高度：0；边框呃：40px实心透明；border-left-color:#8BC34A;}.triangle-rt{width:0;高度：0；边框：40px实心透明；border-right-color:#8BC34A;}.triangle-toplf,.triangle-toprt,.triangle-bottomlf,.triangle-bottomrt{宽度：0;height:0;}.triangle-toplf{border-top:120pxsolid#8BC34A;border-right:120pxsolidtransparent;}.triangle-toprt{border-top:120pxsolid#8BC34A;border-left:120pxsolidtransparent;}.triangle-bottomlf{border-bottom:120pxsolid#8BC34A;border-right:120pxsolidtransparent;}.triangle-bottomrt{border-bottom:120pxsolid#8BC34A;border-left:120pxsolidtransparent;}.triangle1{border-bottom:120pxsolid#8BC34A;border-right:60pxsolidtransparent;}.triangle2{border-top:120pxsolid#8BC34A;border-left:60pxsolidtransparent;}.triangle3{border-top:60pxsolid#8BC34A;border-right:120pxsolidtransparent;}.triangle4{border-top:60px实心#8BC34A；border-left:120pxsolidtransparent;}.triangle5{border-top:80pxsolid#8BC34A;左边框：40px实心透明；border-right:40pxsolidtransparent;}十七、梯形.tixing1{border-bottom:100pxsolid#8BC34A;左边框：60px实心透明；border-right:60pxsolidtransparent;宽度：100px；height:0;}.tixing2{border-bottom:120pxsolid#8BC34A;border-right:120pxsolidtransparent;width:80px;}十八、边框对讲框.duihuakuang{width:200px;高度：100px；边框：2px实心#8BC34A；边界半径：6px；position:relative;}.duihuakuang::before{content:"";宽度：20px；高度：20px；背景：#fff；border-right:2pxsolid#8BC34A;border-bottom:2pxsolid#8BC34A;位置：绝对；左：30%；顶部：100%；变换：旋转（45度）；margin-top:-10px;}十九、锁.suo{width:200px;高度：160px；背景：#8BC34A；边界半径：30px;position:relative;}/*锁孔*/.suo::before{content:"";宽度：25px；高度：50px；背景：#fff；位置：绝对；左：50%；顶部：50%；边界半径：25px；transform:translate(-50%,-50%);}/*锁把*/.suo::after{content:"";宽度：80px；高度：70px；边框：20px纯色#8BC34A；背景：#fff；边框半径：60px60px00；位置：绝对；左：50%；底部：89%；transform:translateX(-50%);}二十、立式球型.qiu1{width:120px;高度：120px；背景：#8BC34A；背景图像：径向渐变（20%30%，#e5ffc7，#75af33，#375f0a）；border-radius:100%;}二十一、圆柱
