根据css设计图标,各种纯css图标

﹏ヽ暗。殇╰゛Y 2022-09-02 14:53 155阅读 0赞

CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。

网页代码中用到(

)和Div边距设置和浮动(

margin: 20px 20px; float: left;

)

1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。

效果图：

![ae5bcf6661b1][]

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。

效果图：

![ae5bcf6661b1][]

\#Triangle \{

width: 0;

height: 0;

float: left;

border-bottom: 100px solid \#fcf706;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

![ae5bcf6661b1][]

4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。

效果图：

![ae5bcf6661b1][]

8\#InvertedTriangle \{

width:0;

height:0;

float:left;

border-top:100pxsolid\#30a3bf;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。

效果图：

![ae5bcf6661b1][]

8\#LeftTriangle \{

width:0;

height:0;

float:left;

border-top:50pxsolidtransparent;

border-right:100pxsolid\#466f20;

border-bottom:50pxsolidtransparent;

6.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

效果图：

![ae5bcf6661b1][]

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.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

效果图：

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属性来旋转不同的边。

效果图：

![ae5bcf6661b1][]

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属性来旋转不同的边。

效果图：

![ae5bcf6661b1][]

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.六边形：在长方形上面和下面各放置一个三角形。

效果图：

![ae5bcf6661b1][]

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.五边形：可以采用三角形和梯形组合。

效果图：

![ae5bcf6661b1][]

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.八边形：在长方形上面和下面各放置一个梯形。

效果图：

![ae5bcf6661b1][]

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属性来设置元素的旋转中心点。

效果图：

![ae5bcf6661b1][]

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属性。

效果图：

![ae5bcf6661b1][]

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属性和设置伪元素的角度来实现。

效果图：

![ae5bcf6661b1][]

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.消息提示框：一个圆角矩形加左边中间的一个小三角形。

效果图：

![ae5bcf6661b1][]

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.钻石：上面一个梯形，下面一个三角形组成。

效果图：

![ae5bcf6661b1][]

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.八卦图：多个圆形的组合。

效果图：

![ae5bcf6661b1][]

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等属性。

效果图：

![ae5bcf6661b1][]

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.扇形：在三角形的基础上，让其中一边成弧形 。

效果图：

![ae5bcf6661b1][]

10\#Sector \{

width:0;

height:0;

float:left;

background-color:\#ffffff;

border-left:70pxsolidtransparent;

border-right:70pxsolidtransparent;

border-top:100pxsolid\#ab9ed1;

border-radius:50%;

23.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

效果图：

![ae5bcf6661b1][]

8\#CrescentMoon\{

width:80px;

height:80px;

float:left;

background-color:\#ffffff;

border-radius:50%;

box-shadow:15px15px00\#9600d2;

24.顶左直角三角形。

效果图：

![ae5bcf6661b1][]

8\#TopLeftTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-top:100pxsolid\#7efde1;

border-right:100pxsolidtransparent;

25.八角形。

效果图：

![ae5bcf6661b1][]

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.十二角形。

效果图：

![ae5bcf6661b1][]

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代码：

网页代码中用到(

)和Div边距设置和浮动(

margin: 20px 20px; float: left;

)

1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。

效果图：

![ae5bcf6661b1][]

9\#Circle\{

width:100px;

height:100px;

float:left;

background:\#6fee1d;

\-moz-border-radius:50px;

\-webkit-border-radius:50px;

border-radius:50px;

2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。

效果图：

![ae5bcf6661b1][]

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。

效果图：

![ae5bcf6661b1][]

\#Triangle \{

width: 0;

height: 0;

float: left;

border-bottom: 100px solid \#fcf706;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

![ae5bcf6661b1][]

4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。

效果图：

![ae5bcf6661b1][]

8\#InvertedTriangle \{

width:0;

height:0;

float:left;

border-top:100pxsolid\#30a3bf;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。

效果图：

![ae5bcf6661b1][]

8\#LeftTriangle \{

width:0;

height:0;

float:left;

border-top:50pxsolidtransparent;

border-right:100pxsolid\#466f20;

border-bottom:50pxsolidtransparent;

6.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

效果图：

![ae5bcf6661b1][]

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.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

效果图：

![ae5bcf6661b1][]

8\#Trapezium \{

height:0;

width:100px;

float:left;

border-bottom:100pxsolid\#dc2500;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

8.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。

效果图：

![ae5bcf6661b1][]

8\#Ring \{

width:100px;

height:100px;

float:left;

background-color:white;

border-radius:80px;

border:5px\#ffd700solid;

9.平行四边形：使用transform使长方形倾斜一个角度。

效果图：

![ae5bcf6661b1][]

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属性来旋转不同的边。

效果图：

![ae5bcf6661b1][]

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属性来旋转不同的边。

效果图：

![ae5bcf6661b1][]

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.五边形：可以采用三角形和梯形组合。

效果图：

![ae5bcf6661b1][]

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.八边形：在长方形上面和下面各放置一个梯形。

效果图：

![ae5bcf6661b1][]

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属性来设置元素的旋转中心点。

效果图：

![ae5bcf6661b1][]

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属性。

效果图：

![ae5bcf6661b1][]

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属性和设置伪元素的角度来实现。

效果图：

![ae5bcf6661b1][]

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.消息提示框：一个圆角矩形加左边中间的一个小三角形。

效果图：

![ae5bcf6661b1][]

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.钻石：上面一个梯形，下面一个三角形组成。

效果图：

![ae5bcf6661b1][]

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.八卦图：多个圆形的组合。

效果图：

![ae5bcf6661b1][]

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等属性。

效果图：

![ae5bcf6661b1][]

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.扇形：在三角形的基础上，让其中一边成弧形 。

效果图：

![ae5bcf6661b1][]

8\#CrescentMoon\{

width:80px;

height:80px;

float:left;

background-color:\#ffffff;

border-radius:50%;

box-shadow:15px15px00\#9600d2;

24.顶左直角三角形。

效果图：

![ae5bcf6661b1][]

8\#TopLeftTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-top:100pxsolid\#7efde1;

border-right:100pxsolidtransparent;

25.八角形。

效果图：

![ae5bcf6661b1][]

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.十二角形。

效果图：

![ae5bcf6661b1][]

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);

background-color:\#2eda01;

\#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);

\#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;

\#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;

\#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;

\#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;

\#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%;

\#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%;

\#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);

\#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;

\#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:"";

\#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;

\#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;

\#Sector \{

width:0;

height:0;

float:left;

background-color:\#ffffff;

border-left:70pxsolidtransparent;

border-right:70pxsolidtransparent;

border-top:100pxsolid\#ab9ed1;

border-radius:50%;

\#CrescentMoon\{

width:80px;

height:80px;

float:left;

background-color:\#ffffff;

border-radius:50%;

box-shadow:15px15px00\#9600d2;

\#TopLeftTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-top:100pxsolid\#7efde1;

border-right:100pxsolidtransparent;

\#TopRightTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-top:100pxsolid\#400526;

border-left:100pxsolidtransparent;

\#BottomLeftTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-bottom:100pxsolid\#600ffe;

border-right:100pxsolidtransparent;

\#BottomRightTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-bottom:100pxsolid\#ff7578;

border-left:100pxsolidtransparent;

\#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);

\#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);

\#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);

background-color:\#2eda01;

\#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);

\#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;

\#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;

\#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;

\#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;

\#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%;

\#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%;

\#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);

\#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;

\#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:"";

\#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;

\#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;

\#Sector \{

width:0;

height:0;

float:left;

background-color:\#ffffff;

border-left:70pxsolidtransparent;

border-right:70pxsolidtransparent;

border-top:100pxsolid\#ab9ed1;

border-radius:50%;

\#CrescentMoon\{

width:80px;

height:80px;

float:left;

background-color:\#ffffff;

border-radius:50%;

box-shadow:15px15px00\#9600d2;

\#TopLeftTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-top:100pxsolid\#7efde1;

border-right:100pxsolidtransparent;

\#TopRightTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-top:100pxsolid\#400526;

border-left:100pxsolidtransparent;

\#BottomLeftTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-bottom:100pxsolid\#600ffe;

border-right:100pxsolidtransparent;

\#BottomRightTriangle \{

width:0px;

height:0px;

margin:10px10px;

float:left;

border-bottom:100pxsolid\#ff7578;

border-left:100pxsolidtransparent;

\#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);

\#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);

[ae5bcf6661b1]: /images/20220829/d3b5f4a9ec334a43992f599c7d9fbd55.png

根据css设计图标,各种纯css图标

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML/CSS 游戏图标

相关 CSS 图标

相关根据css设计图标,各种纯css图标

相关 100多个纯CSS3动画图标

相关 FontAwesome图标制作（css）

相关 css 制作定位图标

相关【CSS】用CSS绘制图标（图标大全）

相关 CSS 绘制loading图标

相关纯CSS实现鼠标移入显示图标效果

相关纯CSS的响应式图标字体 - Cikonss