[항해99 71일차] 2022.05.16 TIL (말풍선 테두리 css )

오늘은 

별로 한게 없다 ㅠㅠ

어제 돌아다녀서 힘이 안나서 많이 못 했던 것 같다 !!

 

const Talk = styled.div`
  color: #000;
  width: 134px;
  height: 28px;
  background-color: #fff;
  top: -36px;
  border: 1px solid #c4c4c4;
  font-size: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  border-radius: 10px;
  transform: translateX(-50%);
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: bounceX;
  z-index: 99;
  &::after {
    border-color: #fff transparent;
    border-style: solid;
    border-width: 0 6px 8px 6.5px;
    content: "";
    display: block;
    left: 60px;
    position: absolute;
    transform: rotate(180deg);
    top: 26px;
    width: 0;
    z-index: 1;
  }
  &::before {
    border-color: #c4c4c4 transparent;
    border-style: solid;
    border-width: 0 7px 9px 8px;
    content: "";
    display: block;
    transform: rotate(180deg);
    left: 60px;
    position: absolute;
    top: 26px;
    width: 0;
    z-index: 0;
  }