JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="comment">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto similique dolores, ab, eum iure laborum quis fugit. Nam, quis minima!
</div>

SCSS

html, body {
  height: 100%;
}
.comment {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  padding: 15px 15px 55px 15px;
  border-radius: 10px;
  color: #FFF;
  background: #000;
  clip-path: polygon(0% 0%, 100% 0%, 100% 110%, 110% 110%, 0 100%, 0 110%, 0 70%);
  &:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #000;
  }
}