[css] 리액트 styled-component로 테두리 있는 말풍선 만들기

말풍선을 어떻게 만들지?

scope프로젝트에서는 테스트진행 페이지에 진행도를 나타내는 프로그래스바가 있었고 그 상태게이지 상단에 말풍선모양의 디자인을 구현해야하는 와이어 프레임을 전달 받았다.  svg형태로 가져다 쓰면 편하겠지만 css로 만들어 보고싶었다.

border-width, ::before, ::after 이 3가지가 핵심

- border-width : top, right,bottom, left 순서로 적용

- ::before는 중심컨텐츠앞 ::after는 뒤에 배치

const ArrowBubble = styled.div`
  position: relative;
  width: 100%;
  height: 25px;
  padding: 0 5px;
  background: #f1f9ff;
  /* -webkit-border-radius: 35px;
  -moz-border-radius: 35px; */
  border-radius: 10px;
  border: #17334a solid 3px;
  @media screen and (max-width: 650px) {
    bottom: -4px;
    width: 30px;
    height: 20px;
  }

  ::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 10px 15px 0;
    border-color: #f1f9ff transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -4px;
    left: 15px;
    @media screen and (max-width: 650px) {
      bottom: -4px;
      left: 5px;
    }
  }

  ::before {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 8px 12px 0;
    border-color: #17334a transparent;
    display: block;
    width: 0;
    z-index: 0;
    bottom: -8px;
    left: 18px;
    @media screen and (max-width: 650px) {
      left: 8px;
    }
  }