말풍선 모양 버튼 만들기

흔히 볼 수 있는 말풍선 모양 버튼을 만드는 방법을 기록해보려 한다.

1. 먼저 html를 작성해준다.

   <a href="#" class="tab-switch is active" role="tab">포장</a>
   <a href="#" class="tab-switch" role="tab">매장</a>

-> 여기서는 "포장" 링크가 클릭이 돼서 active 상태가 됐을 때 말풍선 모양이 나타나도록 구현한다.

2. scss에서 기본 버튼 모양(.tab-switch)과 active상태일 때(&.is-active)의 말풍선 모양($::after)을 만들어 준다.

   .tab-switch{
       flex: 1;
       background-color: $booking-color-bg158;
       line-height: 40px;
       font-size: 13px;
       font-weight: 700p;
       color: #666;
       letter-spacing: -0.3px;
       text-align: center; 
   &.is-active{
   	flex-grow: 1.2;
       border: 1px solid $booking-color-border145;
       background-color: $booking-color-bg157;
       font-size: 15px;
       color: $booking-color-text126;
       box-shadow: 0 2px 3px 0 rgba(0,0,0,05);
       &::after{
       	content:"";
           position: absolute;
           bottom: 0;
           width: 10px;
           height: 10px;
           border: 1px solid;
           border-width: 0 1px 1px 0;
           background-color: $booking-color-bg157;
           transform: rotate(45deg); translateX(-50%);
       }