Загрузка...
CSS-фигуры: звезда, круг, стрелка и многоугольники с предпросмотром — бесплатно и без регистрации.
Свойство clip-path ограничивает видимую часть элемента: polygon задаёт вершины многоугольника в процентах, circle описывает окружность. Например, ромб задаётся четырьмя точками: 50% 0%, 100% 50%, 50% 100%, 0% 50%.
Выберите фигуру и настройте ширину, высоту и цвет. Сравните результат в предпросмотре, затем скопируйте готовый CSS или скачайте файл .css. Замените селектор .clip-shape на класс своего элемента.
Clip-path изменяет отображение, но не размеры занимаемого блоком места. Для сложных контуров с отверстиями лучше использовать SVG. На старых браузерах проверьте совместимость свойства.
Создайте CSS-фигуру clip-path без графического редактора. Выберите готовый контур, размер и цвет, посмотрите результат и скачайте CSS.
CSS использует относительные координаты: при изменении размеров элемента фигура масштабируется. Подходит для декора, бейджей и карточек.
Заполните параметры и нажмите «Сгенерировать».