Генератор разделителя сечения CSS
Создайте декоративный разделитель края сечения — наклон, кривую, треугольник, стрелку/разделение, завиток страницы книги или волнистые облака — из выбранной формы и цвета. Скопируйте SVG, фрагмент CSS background-image или готовый HTML-блок. Работает полностью в вашем браузере.
Ввод
На какое расстояние диагональный край падает, как процент высоты.
Размеры
Преобразование
Заливка
Фон
Вывод
Ваш разделитель будет отображаться здесь.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-section-divider-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"shapeType": "slant",
"slantDepth": "50",
"width": "1200",
"height": "200",
"fillColor": "#464aff",
"fillOpacity": "100",
"bgColor": "#f5f5f5"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-section-divider-generator` tool (CSS Section Divider Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-section-divider-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор разделителя сечения CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Генератор разделителя сечения CSS создает фигурные края сечений, которые вы
видите, разбивающие героические секции, нижние колонтитулы и блоки контента
на современных целевых страницах — наклон, одиночную кривую, треугольник,
выемку стрелки/разделения, завиток угла страницы книги или ряд волнистых
облаков. Результат выдается вам тремя способами: сырой SVG, фрагмент
CSS background-image и готовый для вставки блок HTML. Каждая форма
— это настоящая векторная геометрия, поэтому она остается четкой в любом
размере.
Как его использовать
- Выберите форму — наклон, кривую, треугольник/клин, стрелку/разделение, завиток страницы книги или облака.
- Отрегулируйте собственный элемент управления этой формой (глубина наклона, глубина кривой, положение и высота пика, глубина выемки, размер завитка или количество и высота волн).
- Установите ширину и высоту холста.
- Отразите форму вертикально (чтобы она висела с верхней части секции вместо того, чтобы находиться внизу) или горизонтально (чтобы отразить наклоны, пики и завиток страницы книги в другую сторону).
- Выберите цвет заливки и прозрачность, а также цвет фона. Скопируйте нужный вам вывод — предпросмотр обновляется по мере работы.
Три варианта вывода
- Код SVG — автономный
<svg>, который вы можете поместить прямо в разметку или сохранить как файл.svg. Цвет фона встроен как<rect>, поэтому файл выглядит одинаково независимо от того, где вы его откроете. - Фон CSS — та же форма, кодированная в URL в правиле
background-image: url("data:image/svg+xml,…"), готовая для присоединения к любому элементу в качестве декоративного разделителя. - HTML-фрагмент — оболочка
<div>со встроенным SVG для вставки на страницу без изменения таблицы стилей.
Как мне поместить разделитель в верхнюю часть секции вместо нижней?
Включите Отразить вертикально. По умолчанию каждая форма рисуется так, чтобы находиться на нижнем краю поля; отражение зеркалирует заполненную область, чтобы та же форма свисала с верхнего края вместо этого — отдельный параметр «положение» не требуется.
Будут ли эти формы масштабироваться без размытия?
Да. Все это векторные данные пути с preserveAspectRatio="none", поэтому
форма растягивается, чтобы заполнить любую ширину, которую вы установили —
от телефона до сверхширокого монитора — без потери качества.
Что если я хочу волнистый разделитель?
Этот инструмент охватывает семейства форм с прямыми и изогнутыми краями. Для волнистого, волнующегося разделителя — синусоида, зигзаг, округлые холмы, многослойные волны или органический клякса — используйте Генератор волн SVG, сестринский инструмент, построенный на том же контракте вывода SVG/CSS/HTML.
Конфиденциальность
Генератор работает полностью в вашем браузере. Ваши цвета, размеры и любые другие параметры остаются на вашем устройстве — ничего не загружается и ни одна форма никогда не отправляется на сервер.