Генератор CSS clip-path
Генератор CSS-фрагментов clip-path для маскирования элементов именованными фигурами.
Запустить инструмент
Генератор CSS clip-path создает фрагмент стилей для маскирования элемента одной из именованных фигур. Задайте параметры фигуры, нужный размер и желаемое положение, затем перенесите готовое объявление в правило CSS для веб-страницы.
Поля «Фигура», «Размер» и «Положение» необязательны для заполнения. Если оставить их пустыми, инструмент автоматически подставит значения circle, 50 и center. Доступны варианты circle, ellipse, triangle, hexagon, pentagon, star и diamond.
Для круга значение из поля «Размер» подставляется как процентная величина, а значение из поля «Положение» записывается после ключевого слова at. Для эллипса первая процентная величина равна значению поля «Размер», а вторая составляет 60% от него. Обе величины эллипса используют указанное положение. Треугольник, шестиугольник, пятиугольник, звезда и ромб формируются через многоугольник polygon с фиксированными координатами вершин.
Заполните поля, нажмите кнопку генерации и скопируйте полученную строку со свойством clip-path. Если ввести неподдерживаемое название в поле «Фигура», инструмент применит стандартную геометрию круга.
Инструкция
- Введите в поле «Фигура» одно из значений: circle, ellipse, triangle, hexagon, pentagon, star или diamond.
- Введите числовое значение в поле «Размер», если стандартный размер 50 не подходит.
- Укажите значение в поле «Положение» или оставьте center.
- Запустите генерацию CSS-фрагмента.
- Скопируйте объявление clip-path в правило стилей нужного элемента и проверьте результат.
Примеры
- Круг: введите в поле «Фигура» значение circle, в поле «Размер» число 60, а в поле «Положение» значение center. Генератор создаст объявление clip-path с размером круга 60% и положением по центру.
- Эллипс: введите в поле «Фигура» значение ellipse, в поле «Размер» число 80, а в поле «Положение» значение top left. В результате первая величина составит 80%, а вторая 48%, и эллипс разместится в левом верхнем углу.
Частые вопросы
Что создает генератор?
Генератор создает CSS-фрагмент с объявлением clip-path для маскирования элемента именованной фигурой.
Какие фигуры поддерживаются?
Введите одно из поддерживаемых названий: circle, ellipse, triangle, hexagon, pentagon, star или diamond. Для каждого названия используется соответствующий шаблон.
Как работают поля «Размер» и «Положение»?
Для круга поле «Размер» задает радиус в процентах, а поле «Положение» указывается после ключевого слова at. Для эллипса первая величина равна значению поля «Размер», вторая составляет 60% от него. Обе величины используют указанное положение.
Меняют ли поля «Размер» и «Положение» многоугольные фигуры?
Для triangle, hexagon, pentagon, star и diamond применяются готовые шаблоны polygon с фиксированными процентными координатами. Значения полей «Размер» и «Положение» не изменяют эти шаблоны.