JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<div class="block">
  Глокая куздра штеко будланула бокра и кудрячит бокрёнка.
</div>

CSS

.block {
  background: green;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  color: #fff;
}

.block::after {
  content: '';
  position: absolute;
  /* Абсолютное позиционирование */
  right: 20px;
  bottom: -30px;
  /* Положение треугольника */
  border: -20px solid transparent;
  /* Прозрачные границы */
  border-top: 20px solid green;
  /* Добавляем треугольник */
}