Генератор clip-path
Свойство clip-path обрезает элемент по заданной фигуре: многоугольнику, кругу, эллипсу. Так из прямоугольной картинки или блока получают необычные формы — скошенные углы, шестиугольники, стрелки — без графического редактора.
Выберите форму clip-path и скопируйте CSS.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);Свойство clip-path обрезает элемент по заданной фигуре: многоугольнику, кругу, эллипсу. Так из прямоугольной картинки или блока получают необычные формы — скошенные углы, шестиугольники, стрелки — без графического редактора.
Перетаскивайте точки фигуры в инструменте — он строит значение clip-path. Видимой остаётся область внутри фигуры, остальное скрывается. Готовый CSS копируется в проект; фигура масштабируется вместе с элементом.
Нет, элемент лишь визуально маскируется по фигуре. Сам контент и файл не меняются.
Да, переходы между фигурами с одинаковым числом точек анимируются плавно — получаются интересные эффекты.
В современных — да. Для совместимости со старыми браузерами предусматривайте запасной вид элемента.
Линейные градиенты с предпросмотром.
CSS-тени с живым предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.