[웹디자인] 말풍선 만들기

const Wrapper = styled.div`
    position: relative;
    height: 100px;
    background: white;
    border-radius: 20px;
    padding: 15px;
    &: after {
        content: '';
        position: absolute;
        bottom: -20px;
        right: 30px;
        border: 30px solid transparent;
        border-top-color: white;
        border-bottom: 0;
        border-right: 0;
        border-radius: 0 30px 0;
        transform: rotate(90deg);
    }
`;

원리
border를 각각 다른 색으로 지정한뒤 width를 없애면 아래와 같은 모양이 된다.

이후 border-top,border-left,border-right,border-bottom속성을 조절하여 사각형을 아래와 같이 4등분 할 수있다.

예시 border-top이 0인 경우

예시 border-left가 0인 경우

공통

꼬리를 가상선택자 after안에 지정한뒤 absolute속성으로 붙힌다. 이때 content 속성을 빈 문자열로 주어야 한다.

div::after{
  content: '';
}

큰 꼬리

• 먼저 전체 border를 투명으로 둔다.
• border-top에 색상을 준다
• border-bottom을 제거한다.

border: 30px solid transparent;
border-top-color: white;
border-bottom: 0;

작은 꼬리

• 위 속성에서 border-right를 제거한다.

border: 30px solid transparent;
border-top-color: white;
border-bottom: 0;
border-right: 0;

나뭇잎모양 꼬리

• border-radius로 top-right와 bottom-left를 둥글게 한다.
• rotate속성으로 90도 회전시켜 좌우반전한다.

border: 30px solid transparent;
border-top-color: white;
border-bottom: 0;
border-right: 0;
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 0 30px 0;
transform: rotate(90deg);

커브형 말풍선 꼬리 만들기

border로 말풍선 꼬리 만들기
말풍선제작-bubbly