CSS-эффекты и графика
Галерея CSS-фигур
52 готовых фигур на clip-path: многоугольники, стрелки, звёзды, шестерня, сердце, билет и закладка. Нажмите на любую — код скопируется.
Найдено фигур: 52
Квадрат
Ромб
Треугольник вверх
Треугольник вниз
Треугольник влево
Треугольник вправо
Трапеция
Параллелограмм
Обратный параллелограмм
Пятиугольник
Шестиугольник
Шестиугольник плашмя
Семиугольник
Восьмиугольник
Девятиугольник
Десятиугольник
Круг
Эллипс
Полукруг
Четверть круга
Капля
Стрелка вправо
Стрелка влево
Стрелка вверх
Стрелка вниз
Шеврон вправо
Шеврон влево
Указатель вправо
Указатель влево
Двойная стрелка
Кнопка «плей»
Звезда, 4 луча
Звезда, 5 лучей
Звезда, 6 лучей
Звезда, 8 лучей
Звезда, 12 лучей
Вспышка-ценник
Шестерня
Сердце
Крест
Тонкий плюс
Молния
Щит
Галочка
Билет
Ценник
Закладка
Лист с загнутым углом
Папка
Вкладка
Бейдж
Реплика
Как этим пользоваться
clip-pathобрезает элемент целиком — вместе с фоном, картинкой, рамкой и содержимым.- Тень от
box-shadowобрезается вместе с блоком; чтобы тень повторила фигуру, нуженfilter: drop-shadow()на родителе. - Проценты считаются от размеров блока: у неквадратного блока круг станет эллипсом.
- Клик по обрезанной части не проходит —
clip-pathменяет и область попадания курсора.