大家好,今天小编来为大家解答以下的问题，关于探索多样化的纯CSS图标设计与实现，这个很多人还不知道，现在让我们一起来看看吧！
CSS3可以实现很多漂亮的图形。我收集了32 个图形并将它们列在下面。直接用CSS3绘制这些图形比纹理有更好的性能和更好的体验。这是使网页美观的一个非常好的方法。
这32种形状分别是圆形、椭圆形、三角形、倒三角形、左三角形、直角三角形、菱形、梯形、长方形、正方形、环形、平行四边形、五角星、六角星、五角形、六角形。 八角形， 心形， 鸡蛋形， 无穷大符号， 消息提示框， 菱形， 八卦图， 吃豆人， 扇形， 月牙形， 左上右三角形， 右上右三角形， 左下右三角形， 右下右三角形，八边形、十二边形。
在网页代码中使用（
) 和Div 边距设置和浮动(
边距： 20px 20px； float: 左；
）
1、圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。
渲染：
9#圆{
宽度：100px；
高度：100px；
浮动：左；
背景：#6fee1d；
-moz-边框-半径：50px；
-webkit-边框-半径：50px；
边框半径：50px；
}
2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度的一半。
渲染：
9#椭圆形{
宽度：200px；
高度：100px；
浮动：左；
背景：#e9880c;
-webkit-border-radius:100px/50px;
-moz-边框-半径：100px/50px；
边框半径：100px/50px；
}
3.三角形：宽度和高度设置为0，边框设置为左侧，右侧透明，底部可见为Solid。
渲染：
三角形{
宽度： 0;
高度： 0;
float: 左；
边框底部： 100px实心#fcf706；
border-left: 50px 实心透明；
border-right: 50px 实心透明；
}
4.倒三角形：宽度和高度设置为0，边框设置为左侧，右侧透明，顶边可见实心。
渲染：
8#倒三角形{
宽度：0；
高度：0；
浮动：左；
边框顶部：100pxsolid#30a3bf；
边框-left:50pxsolid透明；
右边框：50pxsolid透明；
}
5.左三角形：宽度和高度设置为0，边框设置为顶部，底部透明，右侧可见Solid。
渲染：
8#左三角形{
宽度：0；
高度：0；
浮动：左；
边框-顶部：50pxsolid透明；
右边框：100pxsolid#466f20;
边框底部：50pxsolid透明；
}
6.菱形：使用变换和旋转相结合，使上下出现两个正负三角形。
渲染：
19#钻石{
宽度：100px；
高度：100px；
浮动：左；
背景：#8e00ff;
/* 旋转*/
-webkit-transform: 旋转（-45 度）；
-moz-transform: 旋转（-45 度）；
-ms-transform: 旋转（-45 度）；
-o-transform: 旋转（-45 度）；
变换：旋转（-45度）；
/* 旋转原点*/
-webkit-transform-origin:0100%；
-moz-变换-origin:0100%；
-ms-transform-origin:0100%；
-o-变换-origin:0100%；
变换-origin:0100%；
边距：40px010px240px；
}
7、梯形：三角形的一种变体，设置左右边相等，并为其设置一个宽度。
渲染：
11#平行四边形{
宽度：120px；
高度：80px；
浮动：左；
边距-left:10px；
-webkit-transform: 倾斜（30 度）；
-moz-transform: 倾斜（30 度）；
-o-transform: 倾斜（30 度）；
变换：倾斜（30度）；
背景颜色：#2eda01;
}
10.五角星：星的实现比较复杂，主要是利用transform属性来旋转不同的边。
渲染：
49#五星{
宽度：0；
高度：0；
浮动：左；
边距：20px20px；
颜色：#ff0012;
位置：相对；
显示：块；
右边框：80pxsolid透明；
边框底部：60pxsolid#ff0012；
边框-left:80pxsolid透明；
-moz-transform:旋转（35度）；
-webkit-transform: 旋转（35 度）；
-ms-transform: 旋转（35 度）；
-o-transform: 旋转（35 度）；
}
#FiveStar:之前{
高度：0；
宽度：0；
内容：""；
位置：绝对；
显示：块；
顶部：-35px；
左：-50px；
边框底部：60pxsolid#ff0012;
边框-left:20pxsolid透明；
右边框：20pxsolid透明；
-webkit-transform: 旋转（-35 度）；
-moz-transform:旋转（-35度）；
-ms-transform: 旋转（-35 度）；
-o-transform: 旋转（-35 度）；
}
#FiveStar:after {
宽度：0；
高度：0；
内容：""；
位置：绝对；
显示：块；
顶部：3px；
左：-85px；
颜色：#ff0012;
右边框：80pxsolid透明；
边框底部：60pxsolid#ff0012;
边框-left:80pxsolid透明；
-webkit-transform: 旋转（-70 度）；
-moz-transform:旋转（-70度）；
-ms-transform: 旋转（-70 度）；
-o-transform: 旋转（-70 度）；
}
11、六角星：利用transform属性旋转不同的边。
渲染：
20#六星{
宽度：0；
高度：0；
浮动：左；
边框-left:50pxsolid透明；
右边框：50pxsolid透明；
边框底部：100pxsolid#cfd810;
位置：相对；
}
#SixStar:after{
宽度：0；
高度：0；
内容：""；
边框顶部：100pxsolid#cfd810；
边框-left:50pxsolid透明；
右边框：50pxsolid透明；
位置：绝对；
顶部：30px；
左：-50px；
}
12. 六边形：在矩形的上方和下方放置一个三角形。
渲染：
30#六角{
宽度：100px；
高度：55px；
浮动：左；
背景：#000001;
位置：相对；
边距：10pxauto；
}
#Hexagon:之前{
内容：""；
宽度：0；
高度：0；
位置：绝对；
顶部：-25px；
剩余：0；
边框-left:50pxsolid透明；
右边框：50pxsolid透明；
边框底部：25pxsolid#000001;
}
#Hexagon:after {
内容：""；
宽度：0；
高度：0；
位置：绝对；
底部：-25px；
剩余：0；
边框-left:50pxsolid透明；
右边框：50pxsolid透明；
边框-顶部：25pxsolid#000001;
}
13.五边形：可以使用三角形和梯形的组合。
渲染：
19#五角大楼{
宽度：60px；
浮动：左；
位置：相对；
边框宽度：52px20px0;
边框样式：solid；
边框颜色：#711ee2透明；
}
#五角大楼：之前{
内容：""；
位置：绝对；
宽度：0；
高度：0；
顶部：-92px；
左：-20px；
边框宽度：050px40px；
边框样式：solid；
边框颜色：透明透明#711ee2;
}
14. 八边形：在矩形的上方和下方放置一个梯形。
渲染：
30#八边形{
宽度：100px；
高度：100px；
浮动：左；
边距：10px10px；
背景颜色：#66e006;
位置：相对；
}
#Octagon:之前{
宽度：42px；
高度：0；
顶部：0；
剩余：0；
位置：绝对；
内容：""；
边框-left:29pxsolid#ffffff;
右边框：29pxsolid#ffffff;
边框底部：29pxsolid#66e006;
}
#Octagon:after{
宽度：42px；
高度：0；
剩余：0；
底部：0；
位置：绝对；
内容：""；
边框-left:29pxsolid#ffffff;
右边框：29pxsolid#ffffff;
边框-顶部：29pxsolid#66e006;
}
15、心形：心形的制作非常复杂。您可以使用伪元素来制作它。将伪元素旋转不同角度，并修改transform-origin属性来设置元素的旋转中心点。
渲染：
39#心{
浮动：左；
位置：相对；
}
#Heart:之前，#Heart:之后{
内容：""；
宽度：70px；
高度：115px；
位置：绝对；
背景：红色；
左：70px；
顶部：0；
-webkit-border-radius:50px50px00;
-moz-边框-半径：50px50px00；
边框半径：50px50px00；
-webkit-transform: 旋转（-45 度）；
-moz-transform: 旋转（-45 度）；
-ms-transform: 旋转（-45 度）；
-o-transform: 旋转（-45 度）；
变换：旋转（-45度）；
-webkit-transform-origin:0100%；
-moz-变换-origin:0100%；
-ms-transform-origin:0100%；
-o-变换-origin:0100%；
变换-origin:0100%；
}
#Heart:after {
剩余：0；
-webkit-transform: 旋转（45 度）；
-moz-transform:旋转（45度）；
-ms-transform: 旋转（45 度）；
-o-transform: 旋转（45 度）；
变换：旋转（45度）；
-webkit-transform-origin:100%100%；
-moz-变换-origin:100%100%；
-ms-transform-origin:100%100%；
-o-变换-origin:100%100%；
变换-origin:100%100%；
}
16.蛋形：椭圆形的变体，高度略大于宽度，设置正确的border-radius属性。
渲染：
9#鸡蛋{
宽度：100px；
高度：160px；
浮动：左；
背景：#ffb028;
显示：块；
-webkit-border-radius:60px60px60px60px/100px100px68px68px;
边框半径：50%50%50%50%/60%60%40%40%；
}
17.无穷大符号：通过border属性并设置伪元素的角度来实现。
渲染：
33#无限{
宽度：220px；
高度：100px；
浮动：左；
位置：相对；
}
#Infinity:之前，#Infinity:之后{
内容：""；
宽度：60px；
高度：60px；
位置：绝对；
顶部：0；
剩余：0；
边框：20pxsolid#008bb0;
-moz-边框-半径：50px50px0；
边框半径：50px50px050px；
-webkit-transform: 旋转（-45 度）；
-moz-transform: 旋转（-45 度）；
-ms-transform: 旋转（-45 度）；
-o-transform: 旋转（-45 度）；
变换：旋转（-45度）；
}
#Infinity:after {
左：汽车；
对：0；
-moz-边框-半径：50px50px50px0；
边框半径：50px50px50px0；
-webkit-transform: 旋转（45 度）；
-moz-transform:旋转（45度）；
-ms-transform: 旋转（45 度）；
-o-transform: 旋转（45 度）；
变换：旋转（45度）；
}
18.消息提示框：左侧中间有一个圆角矩形和一个小三角形。
渲染：
22#评论气泡{
宽度：140px；
高度：100px；
边距：30px20px；
浮动：左；
背景：#8867b9;
位置：相对；
-moz-边框-半径：12px；
-webkit-border-radius:12px；
边框半径：12px；
}
#CommentBubble:之前{
内容：""；
宽度：0；
高度：0；
对：100%；
顶部：38px；
位置：绝对；
边框-顶部：13pxsolid透明；
右边框：26pxsolid#8867b9;
边框底部：13pxsolid透明；
}
19、菱形：由上边的梯形和下边的三角形组成。
渲染：
21#钻石{
宽度：50px；
高度：0；
浮动：左；
边框样式：solid；
边框颜色：透明透明#9aff02透明；
边框宽度：025px25px25px；
位置：相对；
边距：20px050px0;
}
#Diamonds:after{
宽度：0；
高度：0；
顶部：25px；
左：-25px；
边框样式：solid；
边框颜色：#9aff02透明透明透明；
边框宽度：70px50px050px；
位置：绝对；
内容：""；
}
20、八卦图：多个圆圈的组合。
渲染：
34#八图{
宽度：96px；
高度：48px；
边距：20px20px；
浮动：左；
背景颜色：#ffffff;
边框颜色：#000000;
边框样式：solid；
边框宽度：2px2px50px2px；
边框半径：100%；
位置：相对；
}
#EightDiagrams:之前{
宽度：12px；
高度：12px；
顶部：50%；
剩余：0；
内容：""；
位置：绝对；
背景颜色：#ffffff;
边框：18pxsolid#000000;
边框半径：100%；
}
#EightDiagrams:after {
宽度：12px；
高度：12px；
顶部：50%；
剩余：50%；
背景颜色：#000000;
边框：18pxsolid#ffffff;
边框半径：100%；
内容：""；
位置：绝对；
}
21. Bean Eater：设置border和border-top-left-radius、border-bottom-right-radius等属性。
渲染：
13#吃豆人{
宽度：0；
高度：0；
浮动：左；
右边框：60pxsolid透明；
边框左：60pxsolid#300fed；
边框-顶部：60pxsolid#300fed；
边框底部：60pxsolid#300fed；
左上边框半径：60px；
边框右上半径：60px；
边框左下半径：60px；
边框右下半径：60px；
}
22、扇形：在三角形的基础上，将一侧做成弧形。
渲染：
10#扇区{
宽度：0；
高度：0；
浮动：左；
背景颜色：#ffffff;
边框-left:70pxsolid透明；
右边框：70pxsolid透明；
边框顶部：100pxsolid#ab9ed1;
边界半径：50%；
}
23、新月：由两条弧线组成。每条弧可以视为圆弧长的一部分。在圆形的基础上，圆形上的影子可以形成新月。
渲染：
8#新月{
宽度：80px；
高度：80px；
浮动：左；
背景颜色：#ffffff;
边界半径：50%；
框阴影：15px15px00#9600d2；
}
24. 左上右三角形。
渲染：
8#左上三角形{
宽度：0px；
高度：0px；
边距：10px10px；
浮动：左；
边框顶部：100pxsolid#7efde1;
右边框：100pxsolid透明；
}
25. 八角形。
渲染：
27#爆发8{
宽度：80px；
高度：80px；
边距：10px10px；
浮动：左；
背景颜色：#cf7668;
位置：相对；
变换：旋转（20度）；
-webkit-transform:旋转（20度）；
-ms-transform:旋转（20度）；
-moz-transform:旋转（20度）；
-o-transform:旋转（20度）；
}
#爆发8:之前{
宽度：80px；
高度：80px；
顶部：0；
剩余：0；
背景颜色：
#cf7668; position:absolute; content:""; transform:rotate(135deg); -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); } 26.十二角形。 效果图： 32#Burst12{ width:80px; height:80px; margin:20px20px; float:left; background-color:#a8ff26; position:relative; text-align:center; } #Burst12:before, #Burst12:after{ width:80px; height:80px; top:0; left:0; background-color:#a8ff26; position:absolute; content:""; } #Burst12:before{ transform:rotate(30deg); -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); } #Burst12:after{ transform:rotate(60deg); -webkit-transform:rotate(60deg); -ms-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); } 完整的CSS3+HTML5代码： CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。 这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。 网页代码中用到（ ）和Div边距设置和浮动（ margin: 20px 20px; float: left; ） 1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。 效果图： 9#Circle{ width:100px; height:100px; float:left; background:#6fee1d; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; } 2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。 效果图： 9#Oval { width:200px; height:100px; float:left; background:#e9880c; -webkit-border-radius:100px/50px; -moz-border-radius:100px/50px; border-radius:100px/50px; } 3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。 效果图： #Triangle { width: 0; height: 0; float: left; border-bottom: 100px solid #fcf706; border-left: 50px solid transparent; border-right: 50px solid transparent; } 4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。 效果图： 8#InvertedTriangle { width:0; height:0; float:left; border-top:100pxsolid#30a3bf; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; } 5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。 效果图： 8#LeftTriangle { width:0; height:0; float:left; border-top:50pxsolidtransparent; border-right:100pxsolid#466f20; border-bottom:50pxsolidtransparent; } 6.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。 效果图： 19#Diamond { width:100px; height:100px; float:left; background:#8e00ff; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin:0100%; -moz-transform-origin:0100%; -ms-transform-origin:0100%; -o-transform-origin:0100%; transform-origin:0100%; margin:40px010px240px; } 7.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。 效果图： 8#Trapezium { height:0; width:100px; float:left; border-bottom:100pxsolid#dc2500; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; } 8.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。 效果图： 8#Ring { width:100px; height:100px; float:left; background-color:white; border-radius:80px; border:5px#ffd700solid; } 9.平行四边形：使用transform使长方形倾斜一个角度。 效果图： 11#Parallelogram { width:120px; height:80px; float:left; margin-left:10px; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg); background-color:#2eda01; } 10.五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。 效果图： 49#FiveStar { width:0; height:0; float:left; margin:20px20px; color:#ff0012; position:relative; display:block; border-right:80pxsolidtransparent; border-bottom:60pxsolid#ff0012; border-left:80pxsolidtransparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #FiveStar:before { height:0; width:0; content:""; position:absolute; display:block; top:-35px; left:-50px; border-bottom:60pxsolid#ff0012; border-left:20pxsolidtransparent; border-right:20pxsolidtransparent; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #FiveStar:after { width:0; height:0; content:""; position:absolute; display:block; top:3px; left:-85px; color:#ff0012; border-right:80pxsolidtransparent; border-bottom:60pxsolid#ff0012; border-left:80pxsolidtransparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); } 11.六角星：使用transform属性来旋转不同的边。 效果图： 20#SixStar{ width:0; height:0; float:left; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; border-bottom:100pxsolid#cfd810; position:relative; } #SixStar:after{ width:0; height:0; content:""; border-top:100pxsolid#cfd810; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; position:absolute; top:30px; left:-50px; } 12.六边形：在长方形上面和下面各放置一个三角形。 效果图： 30#Hexagon { width:100px; height:55px; float:left; background:#000001; position:relative; margin:10pxauto; } #Hexagon:before { content:""; width:0; height:0; position:absolute; top:-25px; left:0; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; border-bottom:25pxsolid#000001; } #Hexagon:after { content:""; width:0; height:0; position:absolute; bottom:-25px; left:0; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; border-top:25pxsolid#000001; } 13.五边形：可以采用三角形和梯形组合。 效果图： 19#Pentagon{ width:60px; float:left; position:relative; border-width:52px20px0; border-style:solid; border-color:#711ee2transparent; } #Pentagon:before{ content:""; position:absolute; width:0; height:0; top:-92px; left:-20px; border-width:050px40px; border-style:solid; border-color:transparenttransparent#711ee2; } 14.八边形：在长方形上面和下面各放置一个梯形。 效果图： 30#Octagon{ width:100px; height:100px; float:left; margin:10px10px; background-color:#66e006; position:relative; } #Octagon:before{ width:42px; height:0; top:0; left:0; position:absolute; content:""; border-left:29pxsolid#ffffff; border-right:29pxsolid#ffffff; border-bottom:29pxsolid#66e006; } #Octagon:after{ width:42px; height:0; left:0; bottom:0; position:absolute; content:""; border-left:29pxsolid#ffffff; border-right:29pxsolid#ffffff; border-top:29pxsolid#66e006; } 15.心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。 效果图： 39#Heart { float:left; position:relative; } #Heart:before, #Heart:after { content:""; width:70px; height:115px; position:absolute; background:red; left:70px; top:0; -webkit-border-radius:50px50px00; -moz-border-radius:50px50px00; border-radius:50px50px00; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin:0100%; -moz-transform-origin:0100%; -ms-transform-origin:0100%; -o-transform-origin:0100%; transform-origin:0100%; } #Heart:after { left:0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(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%; } 16.蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。 效果图： 9#Egg { width:100px; height:160px; float:left; background:#ffb028; display:block; -webkit-border-radius:60px60px60px60px/100px100px68px68px; border-radius:50%50%50%50%/60%60%40%40%; } 17.无穷符号：通过border属性和设置伪元素的角度来实现。 效果图： 33#Infinity { width:220px; height:100px; float:left; position:relative; } #Infinity:before, #Infinity:after { content:""; width:60px; height:60px; position:absolute; top:0; left:0; border:20pxsolid#008bb0; -moz-border-radius:50px50px0; border-radius:50px50px050px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #Infinity:after { left:auto; right:0; -moz-border-radius:50px50px50px0; border-radius:50px50px50px0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } 18.消息提示框：一个圆角矩形加左边中间的一个小三角形。 效果图： 22#CommentBubble { width:140px; height:100px; margin:30px20px; float:left; background:#8867b9; position:relative; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; } #CommentBubble:before { content:""; width:0; height:0; right:100%; top:38px; position:absolute; border-top:13pxsolidtransparent; border-right:26pxsolid#8867b9; border-bottom:13pxsolidtransparent; } 19.钻石：上面一个梯形，下面一个三角形组成。 效果图： 21#Diamonds{ width:50px; height:0; float:left; border-style:solid; border-color:transparenttransparent#9aff02transparent; border-width:025px25px25px; position:relative; margin:20px050px0; } #Diamonds:after{ width:0; height:0; top:25px; left:-25px; border-style:solid; border-color:#9aff02transparenttransparenttransparent; border-width:70px50px050px; position:absolute; content:""; } 20.八卦图：多个圆形的组合。 效果图： 34#EightDiagrams{ width:96px; height:48px; margin:20px20px; float:left; background-color:#ffffff; border-color:#000000; border-style:solid; border-width:2px2px50px2px; border-radius:100%; position:relative; } #EightDiagrams:before { width:12px; height:12px; top:50%; left:0; content:""; position:absolute; background-color:#ffffff; border:18pxsolid#000000; border-radius:100%; } #EightDiagrams:after { width:12px; height:12px; top:50%; left:50%; background-color:#000000; border:18pxsolid#ffffff; border-radius:100%; content:""; position:absolute; } 21.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。 效果图： 13#PacMan { width:0; height:0; float:left; border-right:60pxsolidtransparent; border-left:60pxsolid#300fed; border-top:60pxsolid#300fed; border-bottom:60pxsolid#300fed; border-top-left-radius:60px; border-top-right-radius:60px; border-bottom-left-radius:60px; border-bottom-right-radius:60px; } 22.扇形：在三角形的基础上，让其中一边成弧形 。 效果图： 8#CrescentMoon{ width:80px; height:80px; float:left; background-color:#ffffff; border-radius:50%; box-shadow:15px15px00#9600d2; } 24.顶左直角三角形。 效果图： 8#TopLeftTriangle { width:0px; height:0px; margin:10px10px; float:left; border-top:100pxsolid#7efde1; border-right:100pxsolidtransparent; } 25.八角形。 效果图： 27#Burst8{ width:80px; height:80px; margin:10px10px; float:left; background-color:#cf7668; position:relative; transform:rotate(20deg); -webkit-transform:rotate(20deg); -ms-transform:rotate(20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); } #Burst8:before{ width:80px; height:80px; top:0; left:0; background-color:#cf7668; position:absolute; content:""; transform:rotate(135deg); -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); } 26.十二角形。 效果图： 32#Burst12{ width:80px; height:80px; margin:20px20px; float:left; background-color:#a8ff26; position:relative; text-align:center; } #Burst12:before, #Burst12:after{ width:80px; height:80px; top:0; left:0; background-color:#a8ff26; position:absolute; content:""; } #Burst12:before{ transform:rotate(30deg); -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); } #Burst12:after{ transform:rotate(60deg); -webkit-transform:rotate(60deg); -ms-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); } 完整的CSS3+HTML5代码： CSS3实现基本图形 #Circle{ width:100px; height:100px; float:left; background:#6fee1d; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; } #Oval { width:200px; height:100px; float:left; background:#e9880c; -webkit-border-radius:100px/50px; -moz-border-radius:100px/50px; border-radius:100px/50px; } #Triangle { width:0; height:0; float:left; border-bottom:100pxsolid#fcf706; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; } #InvertedTriangle { width:0; height:0; float:left; border-top:100pxsolid#30a3bf; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; } #LeftTriangle { width:0; height:0; float:left; border-top:50pxsolidtransparent; border-right:100pxsolid#466f20; border-bottom:50pxsolidtransparent; } #RightTriangle { width:0; height:0; float:left; border-top:50pxsolidtransparent; border-left:100pxsolid#800820; border-bottom:50pxsolidtransparent; } #Diamond { width:100px; height:100px; float:left; background:#8e00ff; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin:0100%; -moz-transform-origin:0100%; -ms-transform-origin:0100%; -o-transform-origin:0100%; transform-origin:0100%; margin:40px010px240px; } #Trapezium { height:0; width:100px; float:left; border-bottom:100pxsolid#dc2500; border-left:50pxsolidtransparent; border-right:50pxsolidtransparent; } #Rectangle { height:50px; width:100px; float:left; background:#afe05d; } #Square { height:100px; width:100px; float:left; background:#b02089; } #Ring { width:100px; height:100px; float:left; background-color:white; border-radius:80px; border:5px#ffd700solid; } #Parallelogram { width:120px; height:80px; float:left; margin-left:10px; -webkit-transform: skew(30deg); -moz-transform: skew(230deg); -o-transform: skew(30deg); transform: skew(30deg);
关于探索多样化的纯CSS图标设计与实现，的介绍到此结束，希望对大家有所帮助。
【探索多样化的纯CSS图标设计与实现】相关文章：
用户评论
终于不用依赖第三方库了！
有13位网友表示赞同！
想做简约风格网站很棒的选择。
有11位网友表示赞同！
学习新的CSS代码，拓展我的技能范围。
有9位网友表示赞同！
很多网站都用css图标，现在我能自己制作了！
有14位网友表示赞同！
这个真方便，不用下载插件也能实现功能。
有17位网友表示赞同！
可以自定义颜色和样式，太棒了！
有12位网友表示赞同！
比那些复杂的HTML代码好多了。
有12位网友表示赞同！
这种图标风格看着非常清爽干净。
有11位网友表示赞同！
这让我可以用更简洁的方法设计网页了!
有15位网友表示赞同！
终于不用担心网站资源过量的烦恼!
有7位网友表示赞同！
可以尝试给我的博客添加一些好看的图标吧。
有5位网友表示赞同！
分享一下我学习到的CSS代码，大家一起进步！
有18位网友表示赞同！
这个方法简单易行，新手也很容易上手。
有13位网友表示赞同！
网站设计再也不用头疼了，有了纯CSS图标就轻松多了。
有17位网友表示赞同！
这些图标的应用场景很多，可以用于网页、APP等等。
有18位网友表示赞同！
学习新技能真有趣！
有19位网友表示赞同！
希望以后可以学到更多关于CSS的知识。
有9位网友表示赞同！
这个资源真的很强大，可以节省很多时间和精力。
有13位网友表示赞同！
我打算把这些CSS图标用到我的项目里去！
有5位网友表示赞同！
赞！对我们开发者来说是一个福音!
有10位网友表示赞同！
学习新技术永远不会过时!
有11位网友表示赞同！