各种纯css图标

各种纯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);

}




































最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容