Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Генератор многоугольного clip-path
Перемещайте вершины или вводите координаты, проверяйте форму обрезки и экспортируйте CSS многоугольника.
Перетаскивайте точки или двигайте их стрелками. Shift увеличивает шаг. Координаты также можно ввести вручную.
CSS
Об инструменте
Создавайте диагональные панели или геометрические значки без отдельной маски изображения.
Как пользоваться
Выберите треугольник, ромб, шестиугольник или другую заготовку. Перетаскивайте точки, меняйте X/Y в процентах, добавляйте и удаляйте вершины. Можно перейти к точке клавишей Tab и двигать её стрелками; Shift увеличивает шаг.
Поддерживается от 3 до 32 точек с координатами 0–100%. Они соединяются в порядке списка, после чего контур замыкается. Скопируйте или скачайте clip-path: polygon(...) из предпросмотра. Криволинейные пути и готовые обрезанные изображения не создаются.
Частые вопросы
Можно ли рисовать кривые или выходить за блок?
Поддерживаются 3–32 вершины с координатами 0%–100%. Кривые и вершины за этими пределами не поддерживаются.
Почему после перемещения точек у многоугольника появляются неожиданные вырезы?
Точки соединяются по порядку списка, а последняя замыкается на первую. Если переместить точку через другую сторону, контур может пересечь сам себя. Начните с готовой формы и сохраняйте порядок вершин вдоль периметра. Лишние точки можно удалять, но должно остаться не менее трёх.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0