RT
Все инструменты
На главную

CSS-эффекты и графика

Вырезанные и скошенные углы

Каждый угол блока настраивается отдельно: оставить прямым, скруглить, срезать под 45° или вырезать дугой. Скос и вырез делает маска из градиентов, поэтому фон, картинка и тень внутри остаются на месте.

Загрузить пример

Заготовки

Углы

Верх-лево

Верх-право

Низ-право

Низ-лево

Превью

Содержимое блока

Скруглённые углы — это обычный border-radius, он идёт отдельной строкой. Скос и вырез — слои маски: их обязательно складывать пересечением, иначе соседний слой вернёт вырезанное обратно и углы просто не появятся.

CSS

.corners {
  border-radius: 0 28px 0 0;
  -webkit-mask-image: linear-gradient(135deg, #0000 19.8px, #000 0), linear-gradient(315deg, #0000 19.8px, #000 0), radial-gradient(circle 28px at 0 100%, #0000 99%, #000 101%);
  mask-image: linear-gradient(135deg, #0000 19.8px, #000 0), linear-gradient(315deg, #0000 19.8px, #000 0), radial-gradient(circle 28px at 0 100%, #0000 99%, #000 101%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}