各种纯css图标

0.073字数 8516阅读 4488

各种纯css图标

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

效果图:

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

效果图:


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.月牙:由两条弧线组成的,每个弧线可以看成一个圆的一部分弧长,在圆的基础上让圆有一个阴影可以形成一个月牙。

效果图:


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可以实现很多漂亮的图形,我收集了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);

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

}




































推荐阅读更多精彩内容