Negative border radius

Бывает, что дизайнеры рисуют блоки с причудливыми вырезами, у которых закруглённые углы, как на прикреплённом изображении. Буквально на днях у меня спрашивали, как такое реализовать.

Есть разные хаки с абсолютно позиционированными элементами-масками. В целом вёрстка таких блоков — задача непростая. Но ребята из HTML Academy выкатили решение — библиотеку nebo.css.

Nebo — сокращение от negative border radius, как часто называют подобные эффекты. Это CSS-файл на 100 с лишним строчек кода, который предоставляет несколько классов и пользовательские свойства для точечной настройки.

В этих 100 строках скрыта магия CSS: градиенты в сочетании с математикой и, конечно же, масками позволяют добиться нужного эффекта. Кому интересно, как это работает, предлагаю изучить исходный код библиотеки.

Для использования достаточно подключить nebo.css к проекту или просто скопировать код и вставить в файл стилей. Далее к элементу, у которого нужно сделать вырез, добавляется класс nebo и модификатор стороны, с которой нужен вырез:

<link rel="stylesheet" href="nebo.css">

<!-- br - сокращение bottom right -->
<div class="card nebo nebo--br">
  <!-- контент карточки -->
</div>

Доступны модификаторы для четырёх сторон:

- .nebo--tl — top left
- .nebo--tr — top right
- .nebo--bl — bottom left
- .nebo--br — bottom right

Логические свойства не завезли, но это отличный повод сделать pull request. Также есть ограничение, что одновременно на элементе можно сделать только один вырез. Если нужно несколько вырезов, то придётся использовать обёртки.

Далее у элемента с вырезом можно точечно настраивать параметры с помощью пользовательских свойств:

- --nb-r — радиус всех трёх скруглений
- --nb-w — ширина выреза
- --nb-h — высота выреза

Также есть набор пользовательских свойств для каждого угла, чтобы можно было задавать разные радиусы, а также переменная для настройки дуги, чтобы можно было делать более интересные вырезы с помощью эллипсов.

Подробнее о библиотеке рассказывает Александр Першин в видео Вогнутые углы за пару строк CSS из рубрики CSS Боль. Также есть интерактивная песочница, где пошагово демонстрируются возможности библиотеки.

#css

Alt изображения: четыре квадратных блока с фиолетовым градиентным фоном расположены по два в ряд. У каждого блока есть вырез со скруглёнными углами. У первого блока квадратный вырез в левом верхнем углу. У второго блока вытянутый прямоугольный вырез в правом верхнем углу. У третьего блока вытянутый прямоугольный вырез в левом нижнем углу. У четвёртого блока квадратный вырез в правом нижнем углу.