CSS 일반 아이콘 제작

1. 만들어진 네 개의 삼각형

.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; 
}

11. 오른쪽 상단 삼각형

#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; 
}	

13. 오른쪽 아래 삼각형

#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; 
}

19. 대화 거품

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