화살표 만들기

드롭다운을 통해 메뉴를 만들 때 유용하게 사용할 수 있는 화살표를 만들어보자

HTML

<div class='container'>
  <div class='arrow'></div>
</div>

• div 태그 안에 화살표를 만들 자식요소 div를 만든다
  container --> 메뉴리스트가 들어갈 자리
  arrow ---> 화살표의 위치를 지정할 부분
  arrow::before ---> 화살표 만드는 부분
  

CSS

.container{
  width:100px;
  height:100px;
  border:4px solid black;
  margin:40px;
  position: relative;
}

.arrow{
  width:40px;
  height:20px;
  overflow:hidden;
  /*border:4px solid red; */
  position: absolute;
  right:0;
  top:-20px;
}

.arrow::before {
  position: absolute;
  content:'';
  width:20px;
  height:20px;
  border:4px solid black;
  transform: rotate(45deg);
  transform-origin: 0 0;
  top:0;
  left:50%;
  background-color:white;
}

1. container의 너비와 높이 값을 지정해준다
2. arrow의 너비, 높이값을 지정하고 화살표가 위치할 곳을 position:absolute를 이용해 위치시킨다
3. arrow::before 가상요소를 이용해 화살표를 만들어 준다
   3-1) 너비와 높이 그리고 border 속성값을 이용해 arrow안에 작은 상자를 만든다
   3-2) transform: rotate(45deg);를 통해 상자를 45도 돌려준다
   3-3) 상자를 돌릴 때 중심점을 transform-origin: 0 0;를 이용해 왼쪽 위가 중심점이 되도록 변경해준다
   3-4) 화살표의 위치를 position: absolute이용해 지정시켜준다
4. arrow::before 가상요소를 통해 화살표를 만들어준 뒤, arrow의 높이를 절반 줄여준다
5. 그리고 overflow:hidden;를 통해 넘치는 부분을 지워주면 화살표 완성