CSS - :before를 이용한 채팅창 말풍선 꼬리 만들기

 

.parent {
  height: 20px;
  width: 100px;
  background-color: #080;
  position: relative;
}
.child {
  position: absolute;
  width: 80px;
  height: 200px;
  background-color: #008;
  left: 50%;
  /* note 50% */
  top: 30px;
  margin-left: -20px;
  /* 2x your arrow size */
}
.child:before {
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #008;
  border-left: 10px solid transparent;
  top: -10px;
  /* your border size */
  margin-left: 10px;
  /* your border-size */
  width: 0;
  height: 0;
  content: "";
  left: 0;
}

 

<div class="parent">
  <div class="child">
  </div>
</div>

 

 

출처: 

https://stackoverflow.com/questions/37318339/how-to-absolute-position-before-pseudo-element-of-child-relative-to-parent

How to absolute position :before pseudo element of child relative to parent?