Последнее обновление на 16.12.2022
CSS треугольник вниз (вверх, справа, снизу) с использованием before
CSS код:
.text{ height:50px; width:100px; background-color:green; } .tr { position: relative; } .tr::before { content: ''; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; height: 0; width: 0; border-width: 8px; /* сверху */ /* margin-left: -8px; left: 50%; bottom: 100%; border-bottom-color: green; */ /* снизу */ margin-left: -8px; left: 50%; top: 100%; border-top-color: green; /* слева */ /* margin-top: -8px; top: 50%; right: 100%; border-right-color: green; */ /* справа */ /* margin-top: -8px; left: 100%; top: 50%; border-left-color: green; */
HTML код:
<div class="text"><div class="tr"></div></div>
Пример:
Ваш комментарий будет первым