JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<div class="test corner">
  Математическое моделирование однозначно показывает, что умножение вектора на число искажает косвенный функциональный анализ. То, что написано на этой странице неправда! Следовательно: комплексное число поддерживает экспериментальный критерий сходимости Коши. Функция выпуклая кверху традиционно создает расходящийся ряд.
</div>
<div class="test corner corner_right">
  Линейное программирование непредсказуемо. Аксиома детерменирована. Целое число решительно отображает неопределенный интеграл.
</div>
<div class="test corner corner_bottom corner_right">
  Неравенство Бернулли решительно обуславливает убывающий скачок функции. Рациональное число масштабирует максимум. График функции многих переменных, не вдаваясь в подробности, изящно усиливает убывающий полином. Представляется логичным, что частная производная соответствует график функции многих переменных.
</div>

CSS

.test{
  display: inline-block;
  vertical-align: top;
  width: 300px;
  border: 1px #ccc solid;
  background-color: #fff;
  position: relative;
  margin: 20px;
  padding: 10px;
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 13px;
  line-height: 1.4;
}

.corner::after{
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-left: 1px #ccc solid;
  border-top: 1px #ccc solid;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 20px;
  top: -11px;
  background-color: #fff;
}

.corner_right::after{
  left: auto;
  right: 20px;
}

.corner_bottom::after{
  top: auto;
  bottom: -11px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}