Популярный пост
Нестандартные скругления в верстке
Внутренние скругления
Довольно часто ко мне приходят с вопросом как сделать блоки нестандартной формы с внутренними скруглениями в верстке. Например, вот такие:
Одно из решений заключается в том, чтобы составить блок из нескольких кусочков. Там где получается, делаем обычные
прямоугольники и border-radius. В остальных местах используем псевдоэлементы с нужными детальками. Самый
простой вариант - это SVG
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 16C7.16344 16 0 8.83656 0 0V16H16Z" fill="#ff6392"/>
</svg>
Вот такая картиночка:
Можно и более затейливо сделать такой "уголок" с помощью радиального градиента
See the pen (@Websitio) on CodePen.
Градиенты были бы абсолютно прекрасны, но на момент написания статьи имеют проблемы со сглаживанием. На некоторых устройствах могут быть видны зазубрины. Может быть вылечено с помощью смещения точек перехода градиента. То есть нужно указывать не одинаковые значения, а с небольшим расстоянием. Это расстояние подбирается индивидуально в каждом градиенте.
Фигура с вогнутыми границами
See the pen (@Websitio) on CodePen.
Выпуклость при цветном фоне
See the pen (@Websitio) on CodePen.
Уголки для блока со скруглениями
Задача сделать уголки как для вклеивания фотографий на ретро стенгазетах
See the pen (@Websitio) on CodePen.
Выезжающая кнопка
При наведении на кнопку справа выезжает круг с иконкой. По мотивам вопроса с Habr QnA
See the pen (@Websitio) on CodePen.