CSS 만으로 만드는 화살표와 닫기버튼

반응형이 많이 쓰이는 요즘 더 이상 이미지로 화살표나 X버튼을 만들어서 이미지가 깨지거나 수정시 하게 되는 업로드의 불편함을 줄여주는 방법이 되겠다.

---

< >화살표 만들기

1. ::after에 border와 transform을 활용해서 만드는 방법

.arrow {position: relative;}
.arrow::after {position: absolute; left: 0; top: 0; content: ''; width: 50px; height: 50px; border-top: 5px solid #000; border-right: 5px solid #000; transform: rotate(225deg);}

transform 값 4개정도는 알아두고 적절하게 활용하자.
< 225deg , > 45deg, ∧ 315deg, ∨ 135deg 

---

X 버튼 만들기

1. content:"\00d7";를 활용해서 만드는 방법
크기는 폰트크기로 조정가능!

.close{display:inline-block; display:inline;}
.close:after {display:inline-block; content:"\00d7"; font-size:20px;}

2. transform:rotate(45deg)를 활용해서 막대 두개를 회전시켜 만드는 방법

.close {width:50px; height: 50px;}
.close:before, .close:after {position: absolute; left: 15px; content:' '; height: 40px;width: 2px; background-color: #000;}
.close:before {transform: rotate(45deg);}
.close:after {transform: rotate(-45deg);}

• 1번은 이미지폰트 활용이라 굵기조절이 불편하지만 쉽게 만들 수 있어서 일반적으로 사용하기 좋다.
  크기조절도 font-size로~
• 2번의 경우 마우스오버 액션을 주고 싶거나 애니메이션이 필요하다면 사용하기 좋다.
  굵기조절은 내 마음대로~