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