Генератор форм CSS

Создавайте многоугольник, звезду, значок, шестиугольник и шевроны с помощью современной геометрии CSS.

Работает в вашем браузере. Файлы никогда не покидают устройство. Как это проверить

…

Как пользоваться

  1. 1
    Шаг 1: откройте «Генератор форм CSS» и введите данные

    Введите числа или текст, добавьте файл или выберите нужные параметры. Ничего не загружается: всё остаётся в вашем браузере.

  2. 2
    Шаг 2: что делает «Генератор форм CSS»

    Создавайте многоугольник, звезду, значок, шестиугольник и шевроны с помощью современной геометрии CSS.

  3. 3
    Шаг 3: прочитайте результат и сравните

    Результат появляется сразу. Измените одно значение, чтобы увидеть, как меняется ответ, и оставьте цифру, которая подходит вашему случаю.

  4. 4
    Шаг 4: скопируйте или сохраните

    Скопируйте результат или скачайте его. Для важного решения сверьтесь с официальным источником или консультантом.

Об этом инструменте

Clip-path позволяет разработчикам вырезать элементы HTML и изображения в точные геометрические многоугольники и формы без необходимости Photoshop или SVG маски.

Советы для лучшего результата

Перед началом уделите минуту параметрам и сначала попробуйте инструмент на небольшом примере. Всё работает в браузере на вашем устройстве: ничего из введённого или добавленного не загружается, а закрытие вкладки всё стирает. Если что-то выглядит неправильно, перезагрузите страницу и повторите или сообщите нам, что пошло не так, через ссылку на этой странице. Если результат всё ещё кажется неверным, меняйте по одному значению за раз, чтобы увидеть, какое поле влияет больше всего. Добавьте страницу в закладки, если будете пользоваться ею снова.

Коротко

Часто задаваемые вопросы

Что такое CSS-Clip-path?

The `clip-path` CSS property creates a clipping region that determines which parts of an element or image are visible.

Какие формы включены в качестве предустановки?

Предварительные настройки включают треугольник, шестиугольник , 5-точечную звезду, значок скидки на товар, навигационный шеврон и круговые маски.

Можно с этим снимать фотографии и видео?

Yes. Apply the generated clip-path CSS rule to any `<img>`, `<video>`, `<div>`, or card component in your stylesheet.

Влияет ли путь клипа на элементы, которые можно щелкнуть?

В современных браузерах только видимая, не отрезанная область элемента реагирует на движение указателя и нажатие событий.

Полностью бесплатноБез оплаты и регистрации
Файлы остаются приватнымиВсё работает в вашем браузере
Просто на вашем языкеДоступно на многих языках