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

最新推荐文章于 2024-06-18 10:00:00 发布
最新推荐文章于 2024-06-18 10:00:00 发布
阅读量622 收藏 2
点赞数
文章标签： 根据css设计图标

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

ae5bcf6661b1

ae5bcf6661b1

ae5bcf6661b1

#Triangle {

width: 0;

height: 0;

float: left;

border-bottom: 100px solid #fcf706;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

ae5bcf6661b1

ae5bcf6661b1

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

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属性为高度除以高度一半。

效果图：

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

ae5bcf6661b1

ae5bcf6661b1

ae5bcf6661b1

#Triangle {

width: 0;

height: 0;

float: left;

border-bottom: 100px solid #fcf706;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

ae5bcf6661b1

ae5bcf6661b1

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

}

weixin_40001805
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
51个纯CSS绘制的漂亮图标（转）
OBKoro1前端分享
03-25 4083
写在前面：无意中看到这篇干货，css令人大开眼界，不要低估任何一门技术，只是你钻研的不够深入，就是自己菜而已，下面是正文。 正文开始： CSS是网页设计师和前端人员需要了解和学习的一门语言，特别是现在很多网页使用扁平化设计，这类设计风格大部分布局、交互动画甚至是图标都会使用高级点的CSS3技能，所以我们应该熟练掌握CSS这门样式语言。 为大家分享51个纯CSS绘制的漂亮图标，欣赏同时，大家可以
【CSS】用CSS绘制图标（图标大全）
热门推荐
码婆Doph
11-25 2万+
转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！ 技艺不精，若有纰漏，还请不吝指出。 暂停按钮 <style> .box{ width: 50px; height: 50px; background-color: white; border: 1px solid blac
前端面试必学基础！用CSS画7大基本图形
最新发布
Web面试那些事儿的博客
06-18 986
如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
09-24
主要介绍了纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯css3绘制各种图形图标样式代码
11-24
纯css3绘制各种图形图标样式代码
纯css图标.rar
09-18
100个常用纯CSS图标（icono-home,icono-mail,icono-rss,icono-hamburger,icono-plus,icono-cross,icono-check,icono-power,icono-heart,icono-flag,icono-share,icono-pin,icono-locationArrow,icono-asterisk,icono...
CSS icon图标之纯CSS实现带动画效果的天气图标
09-24
在网页设计中，CSS图标（CSS icon）是一种使用纯CSS代码创建的图形元素，它们不需要额外的图像资源，通过设置不同的CSS属性，如边框、背景色、伪元素等，来构建出各种形状和图案，进而形成图标。这种方式可以减少...
纯CSS3图标菜单下拉收缩特效代码
03-20
本文将详细解析"纯CSS3图标菜单下拉收缩特效代码"这一主题，探讨如何仅通过CSS3实现一个无JavaScript的图标菜单，并展示其下拉收缩效果。 首先，CSS3图标菜单主要利用了CSS3的伪类选择器和转换（transform）属性。...
网页图标设计-css库
04-25
CSS图标库则是开发者和设计师们的利器，它们提供了一系列预定义的、可定制的图标，通过CSS代码即可轻松插入到网页中，大大提高了设计效率。 在CSS图标库中，图标通常被设计为矢量图形，这意味着它们可以在不同尺寸...
一步步打造自己的纯CSS单标签图标库
weixin_34310127的博客
11-28 280
图标作为网页设计中的一部分，其在凸显网页重要元素特性，视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点，在项目实践时不宜将每个图标作为单个图片元素进行加载，这会增加Http请求，影响网页的性能。因此，在实际中，我们可能见到以下一些常见的解决方案： 将多个图标按照一定排列顺序合并在一个图片里（即sprite图），再通过CSS设置元素的background-posi...
CSS3多样式小图标按钮
09-06
这次我们要来分享一组纯CSS3打造的动画图标，总共100多个，每一个图标没有用图片，而是利用CSS3的相关特性来实现。在这些CSS3图标中，有部分是动态的，这些带动画的图标也是利用CSS3的动画属性实现的。
用css画图标
知其白，守其黑；和其光，同其尘。
06-28 291
css3的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。 这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。 用css画图标 我们要将该 div 的 width 和 height 都设置为 0，三角形是通过设置 border 来实现； 通过我们需要画成的三角形的目标分析，这个三角形的朝向(只针对规则的朝向：上、右、下、左、上左、上
用css画常用的图标
weixin_34413357的博客
05-17 169
工作中经常会用到箭头，加号，三角形等，直接让ui给出设计图icon当然可以，但是牵扯到对齐等操作，对图片的操作显然没有对div（小程序view）来的方便，所以我就在网上找了一些方法，个人仅做整理，并非原创，让我们开始！箭头// html <div class="arrow right"></div> <div class="arrow left"></di...
css绘制图标
weixin_30412013的博客
02-01 78
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...
有趣的css 画图标
blithe影子
02-23 452
今天看到分享的视频，css画图标，很有意思，分享一下。 首先我们要实现如图的一个三角形，怎么实现呢，怎么用css来实现： 思路就是：首先设置四个边框，元素宽度为零，截图如下： 然后把边框设置三遍设置成透明色，改变边框的宽度：代买如下 <!DOCTYPE html> <html> <head> <meta charset="ut...
CSS实现图标样式思路+总结
qq_41096610的博客
10-03 1210
最近需要利用纯CSS来实现各种图标样式，发现这是一件挺有意思的事情，总结如下，与君共勉。 前言 首先，利用CSS绘图，需要对CSS有一个基础的认识，可以参照《W3school_css教程》。 总结 其实，CSS绘图与我们平常画图有着相似之处。首先需要分析所绘图形可以拆分成由哪些简单的图形组成。如果不能拆分，那就考虑考虑可以由哪些所熟悉的图形改变而成。总而言之，就是需要将一个复杂的图标简化成我们所熟悉的。当然对于一些比较常用的图标，我们需要清楚绘制原理，例如圆、三角形等，很多复杂的图标都是利用简单的图标组合而
整理css（三）css画小图标
farmerXU的博客
05-29 572
第一种： header.header3 .dropdown-menu:before{ content: ""; width: 0; height: 0; border-bottom: 10px solid #999; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; right: 10px; left: auto; top: -7px; }
css写√的图标_css画出小图标
weixin_29288313的博客
01-17 176
根据设计稿，很多小图标可以使用css画出来。下面我来举几个项目中常见的例子！这部分的图标样式一共就分为2中，一种是三角形，一种是特殊形状！使用边框画三角形从一个完整的矩形开始border-width: 10px;border-color: #333 ;border-style: solid;width:10px;height: 10px;如果是上三角形就把上边框宽度置为0，下三角形同理，这里画一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值