JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div class="block">Треугольник с тенью</div>

CSS

.block { position:relative; padding:16px 20px; color: #009; border:1px solid #009; border-radius:8px; box-shadow: 0 0 7px #000;}
.block::before { content:''; position:absolute; left:20px; bottom:-11px; width:20px; height:20px; background:#fff; border:1px solid #009; box-shadow:0 0 7px #000; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.block::after { content:''; position:absolute; left:10px; bottom:0; width:40px; height:16px; background:#fff;}