Вогнутые углы за пару строк CSS | CSS Боль

Инвертированные углы — любимый дизайнерский приём и вечная боль верстальщиков. Каждый раз одно и то же: дополнительные `div`-ы, псевдоэлементы, позиционирование и хаос в коде. А если фон не сплошной — всё ломается. В этом выпуске: Почему сделать вогнутый угол (inverted border radius) — одна из самых раздражающих задач в вёрстке. Как библиотека nebo.css решает её в пару строк кода, без JS и SVG. Простая структура классов: `nebo--tl`, `nebo--br`, `nebo--bl`, `nebo--tr` — добавил и готово. Настройка формы угла с помощью CSS-переменных `-nb-r`, `-nb-w`, `-nb-h`. Новые возможности версии 1.1: независимые радиусы, эллиптические скругления и параметр `-_nb-smooth` для плавности. Как делать несколько углов и сложные формы с помощью обёрток. `nebo.css` — это настоящее обезболивающее для верстальщика. Подключаешь, настраиваешь переменные — и боль исчезает. Демонстрация →
Библиотека HTML Academy →
Таймкоды: 00:00:06 Введение в проблему 00:00:49 Описание инвертированного угла 00:02:32 Ограничения существующих решений 00:03:19 Представление библиотеки «`nebo.css`» 00:04:24 Настройка углов с помощью переменных 00:06:17 Добавление нескольких углов 00:07:23 Создание сложных элементов интерфейса 00:08:26 Обновление библиотеки 00:09:57 Работа с эллиптическими формами 00:11:47 Заключение #css #frontend #webdevelopment #cssgradients