CSS常用图标制作

一、制作的四个三角形

.css-arrow-acute {
     border-color: red green blue orange;
     border-style:solid;
     border-width:25px 10px 15px 30px;
     width:0;
     height:0;
}

二、正方形

#square { 
   width: 100px;
   height: 100px; 
   background: red; 
}

二、长方形

#square { 
   width: 200px;
   height: 100px; 
   background: red; 
}

三、圆形

#circle { 
   width: 100px; 
   height: 100px; 
   background: red; 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px; 
	}

三、半圆

#semicircle{ 
   width: 100px; 
   height: 50px; 
   background: red; 
   -moz-border-radius: 100px 100px 0 0; 
   -webkit-border-radius:  100px 100px 0 0; 
   border-radius:  100px 100px 0 0; 
	}

四、扇形

#fanShaped {
	background: none repeat scroll 0 0 red;
	-webkit-border-radius: 50px 0 0 0;
	-moz-border-radius: 50px 0 0 0;
	border-radius: 50px 0 0 0;
	height: 50px;
	width: 50px;
}

五、椭圆

#oval { 
    width: 200px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px / 50px; 
    border-radius: 100px / 50px; 
	}

六、三角朝上

 

#triangle-up { 
	width: 0; 
	height: 0; 
	border: 50px solid red;
        border-color: transparent transparent red;
}

七、三角朝下

 

#triangle-down { 
	width: 0; 
	height: 0; 
	border: 50px solid red;
	border-color: red transparent transparent;
}

八、三角向左

#triangle-left { 
	width: 0; 
	height: 0; 
	border: 50px solid red;
	border-color: transparent red transparent  transparent;
} 

九、三角向右

#triangle-right { 
	width: 0; 
	height: 0; 
	border: 50px solid red;
	border-color: transparent transparent transparent red;
}

十、左上角三角

#triangle-topleft { 
	width: 0; 
	height: 0; 
	border: 100px solid red; 
	border-color: red transparent transparent red; 
}

十一、右上角三角

#triangle-topright { 
	width: 0; 
	height: 0; 
	border: 100px solid red; 
	border-color: red red transparent transparent; 
}	

十二、左下角三角

#triangle-bottomleft { 
	width: 0; 
	height: 0; 
	border: 100px solid red; 
	border-color: transparent transparent red red; 
}	

十三、右下角三角

#triangle-bottomright { 
	width: 0; 
	height: 0; 
	border: 100px solid red; 
	border-color: transparent red  red transparent; 
}

十四、八边形

#parallelogram { 
	width: 150px;
	height: 100px; 
	-webkit-transform: skew(20deg); 
	-moz-transform: skew(20deg); 
	-o-transform: skew(20deg); 
	transform: skew(20deg);
	background: red; 
}

十五、六角星

#star-six { 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-bottom: 100px solid red; 
	position: relative; 
} 
#star-six:after { 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-top: 100px solid red; 
	position: absolute; 
	content: ""; 
	top: 30px; 
	left: -50px; 
}
	

十六、五角星

#star-five { 
	margin: 50px 0; 
	position: relative;
	display: block; 
	color: red; 
	width: 0px; 
	height: 0px; 
	border-right: 100px solid transparent; 
	border-bottom: 70px solid red; 
	border-left: 100px solid transparent; 
	-moz-transform: rotate(35deg); 
	-webkit-transform: rotate(35deg); 
	-ms-transform: rotate(35deg); 
	-o-transform: rotate(35deg); 
	transform: rotate(35deg); 
}
#star-five:before { 
	border-bottom: 80px solid red; 
	border-left: 30px solid transparent; 
	border-right: 30px solid transparent; 
	position: absolute; 
	height: 0; 
	width: 0; 
	top: -45px; 
	left: -65px; 
	display: block; 
	content: ''; 
	-webkit-transform: rotate(-35deg); 
	-moz-transform: rotate(-35deg); 
	-ms-transform: rotate(-35deg); 
	-o-transform: rotate(-35deg);
	transform: rotate(-35deg); 
} 
#star-five:after { 
	position: absolute; 
	display: block; 
	color: red; 
	top: 3px; 
	left: -105px; 
	width: 0px; 
	height: 0px; 
	border-right: 100px solid transparent; 
	border-bottom: 70px solid red; 
	border-left: 100px solid transparent; 
	-webkit-transform: rotate(-70deg); 
	-moz-transform: rotate(-70deg); 
	-ms-transform: rotate(-70deg); 
	-o-transform: rotate(-70deg); 
	transform: rotate(-70deg); 
	content: ''; 
}

十七、心型

#heart { 
        position: relative; 
        width: 100px; 
        height: 90px; 
} 
#heart:before, 
#heart:after { 
	position: absolute; 
	content: ""; 
	left: 50px; 
	top: 0; 
	width: 50px; 
	height: 80px; 
	background: red; 
	-moz-border-radius: 50px 50px 0 0;
	-webkit-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0; 
	-webkit-transform: rotate(-45deg); 
	-moz-transform: rotate(-45deg); 
	-ms-transform: rotate(-45deg); 
	-o-transform: rotate(-45deg); 
	transform: rotate(-45deg); 
        -webkit-transform-origin: 0 100%; 
	-moz-transform-origin: 0 100%; 
	-ms-transform-origin: 0 100%; 
	-o-transform-origin: 0 100%; 
	transform-origin: 0 100%; 
	} 
#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%; 
}
	

十八、太极型

#yin-yang { 
	width: 96px;
	height: 48px; 
	background: #eee; 
	border-color: red; 
	border-style: solid; 
	border-width: 2px 2px 50px 2px; 
	border-radius: 100%; 
	position: relative; 
} 
#yin-yang:before { 
	content: ""; 
	position: 
	         absolute; 
	         top: 50%; 
	         left: 0; 
	background: #eee; 
	border: 18px solid red; 
	border-radius: 100%; 
	width: 12px; 
	height: 12px; 
} 
#yin-yang:after { 
	content: ""; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	background: red; 
	border: 18px solid #eee; 
	border-radius:100%; 
	width: 12px; 
	height: 12px; 
}

十九、对话泡泡

#talkbubble { 
	width: 120px; 
	height: 80px; 
	background: red; 
	position: relative; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px; 
} 
#talkbubble:before { 
	content:"";
	position: absolute; 
	right: 100%; 
	top: 26px; 
	width: 0; 
	height: 0; 
	border-top: 13px solid transparent; 
	border-right: 26px solid red; 
	border-bottom: 13px solid transparent; 
}	

二十、十二边型

#burst-12 { 
	background: red;
	width: 80px; 
	height: 80px; 
	position: relative; 
	text-align: center; 
} 
#burst-12:before, 
#burst-12:after { 
	content: ""; 
	position: absolute; 
	top: 0; left: 0; 
	height: 80px; 
	width: 80px; 
	background: red; 
} 
#burst-12:before { 
	-webkit-transform: rotate(30deg); 
	-moz-transform: rotate(30deg); 
	-ms-transform: rotate(30deg); 
	-o-transform: rotate(30deg); 
	transform: rotate(30deg); 
} 
#burst-12:after { 
	-webkit-transform: rotate(60deg); 
	-moz-transform: rotate(60deg); 
	-ms-transform: rotate(60deg); 
	-o-transform: rotate(60deg); 
	transform: rotate(60deg); 
}