Front-End/CSS
-
CSS 만으로 만드는 화살표와 닫기버튼Front-End/CSS 2024. 4. 4. 09:42
반응형이 많이 쓰이는 요즘 더 이상 이미지로 화살표나 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개정도는 알아두고 적절하게 활용하자. 45deg, ∧ 315deg, ∨ ..