JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="bubble">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, nisi.
</div>

SCSS

.bubble {
  
  --width: 20px;
  position: relative;
  padding: 30px;
  margin: 30px;
  background: #999;
  box-shadow: 0 0 0 3px #4444dd;
  &::before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 10px;
    width: var(--width);
    height: var(--width);
    background: #999;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    box-shadow: 0 0 0 3px #4444dd;
  }
  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 7px;
    z-index: -1;
    width: 26px;
    height: 26px;
    background: #4444dd;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    /* box-shadow: 0 0 0 3px #4444dd; */
  }
}