Как сверстать элементы в углах блока с помощью CSS

Вёрстка декоративных уголков, скруглений или значков в углах контейнера - популярная задача в веб-дизайне. Такие элементы часто используются для выделения акций, новостей или статусов (например, «New», «Sale», «Топ»). В этом руководстве мы разберём несколько надёжных способов реализовать подобные визуальные эффекты с использованием чистого CSS, без привязки к JavaScript или картинкам.

Основные подходы к созданию угловых элементов

Существует три основных метода размещения декоративных элементов в углах блока:

• Псевдоэлементы ::before и ::after - идеальны для простых геометрических фигур (треугольников, скруглений, линий).
• Вложенные элементы (например, span или div) - подходят для сложных значков с текстом или иконками.
• CSS-маски и clip-path - позволяют вырезать сложные формы, но требуют более тонкой настройки.

Рассмотрим каждый метод с примерами кода.

Метод 1: Псевдоэлементы для треугольников и скруглений

Самый популярный способ - использовать ::before и ::after для создания уголков. Например, чтобы добавить треугольник в правый верхний угол блока:

.block {
  position: relative;
  overflow: hidden;
}

.block::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #ff6600 transparent transparent;
}

Этот код создаёт оранжевый треугольник, прижатый к правому верхнему углу. Аналогично можно сделать уголок в любом другом углу, изменив значения top, right, bottom, left и направления границ.

Метод 2: Вложенные элементы с абсолютным позиционированием

Если нужно разместить в углу не просто треугольник, а, например, текст «-30%» или иконку, используйте отдельный элемент:

<div class="card">
  <span class="badge">Sale</span>
  <!-- остальной контент -->
</div>

CSS для такого значка:

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e74c3c;
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

Такой подход даёт полный контроль над внешним видом и содержимым углового элемента.

Метод 3: Использование clip-path для сложных форм

Свойство clip-path позволяет вырезать любую многоугольную область. Например, чтобы сделать срезанный угол у блока:

.block {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}

Этот метод удобен, когда нужно изменить форму самого блока, а не добавлять отдельный декоративный элемент. Однако помните: clip-path может обрезать тени и внутреннее содержимое, поэтому используйте его с осторожностью.

Советы по адаптивности и кроссбраузерности

• Используйте position: relative для родительского контейнера - это база для абсолютного позиционирования угловых элементов.
• Для треугольников задавайте размеры через border-width в относительных единицах (em, rem или %), чтобы они масштабировались при изменении размера шрифта.
• Проверяйте отображение в старых браузерах: псевдоэлементы поддерживаются везде, а clip-path - только в современных версиях.
• Избегайте перекрытия углового элемента с контентом - задавайте внутренние отступы (padding) у блока.

Заключение

Вёрстка элементов в углах блока - базовая, но важная задача. Выбор метода зависит от сложности декора: для простых треугольников используйте псевдоэлементы, для текстовых плашек - вложенные теги, для нестандартных форм - clip-path. Применяя эти техники, вы сможете создавать аккуратные и современные интерфейсы без лишнего кода.