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