화살표의 방향을 표시할 때 icon을 사용해도 마땅히 날카로운 모습을 보이지 않아서 마음에 들지 않았는데 border를 이용하고
회전을 시키니 모양이 예쁘다.
.arrow,
.arrow_bottom
{
width:50px;
height:50px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.arrow_bottom {
border-top: 3px solid #1079e3;
border-left: 3px solid #1079e3;
}
.arrow_left {
width:50px;
height:50px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow_top {
width:50px;
height:50px;
border-top: 1px solid #00f;
border-left: 1px solid #00f;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color:#eee;
margin:20px
}
.arrow_right {
width:50px;
height:50px;
border-top: 1px solid #00f;
border-left: 1px solid #00f;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
background-color:#eee;
margin:20px
}
.closeBox {
width:40px;
height:40px;
cursor:pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.closeBox div {
float:left;
box-sizing:border-box;
width:20px;
height:20px;
padding:0px;
margin:0px;
}
.closeBox div:nth-child(1){border-right:1px solid #333;border-bottom:1px solid #333;}
.closeBox div:nth-child(2) {border-bottom:1px solid #333;}
.closeBox div:nth-child(3) {border-right:1px solid #333;}
/* mouse over */
.closeBox:hover div:nth-child(1){border-right:1px solid #f00;border-bottom:1px solid #f00;}
.closeBox:hover div:nth-child(2) {border-bottom:1px solid #f00;}
.closeBox:hover div:nth-child(3) {border-right:1px solid #f00;}