Генератор треугольников CSS
Создавайте чистый треугольник CSS, указывающий в любом из 8 направлений — классический трюк с нулевой границей или современный многоугольник clip-path — с вашей шириной, высотой и цветом, а также фрагментом HTML и предпросмотром SVG. Работает полностью в вашем браузере.
Ввод
Куда указывает треугольник — четыре кардинальных направления или клиновидный угол 90 градусов.
Border работает везде, но не оставляет область содержимого; clip-path сохраняет реальный прямоугольник, в котором вы можете разместить градиент.
Используется для сгенерированного правила и фрагмента HTML.
Вывод
Ваш треугольник появится здесь.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-triangle-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"direction": "up",
"technique": "border",
"width": "100",
"height": "100",
"color": "#464aff",
"className": "triangle"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-triangle-generator` tool (CSS Triangle Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-triangle-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 не имеет примитива. Нет shape: triangle, поэтому вы это имитируете — либо злоупотребляя тем, как границы встречаются в углу, либо обрезая прямоугольник до трех точек. Этот генератор пишет оба варианта для вас: выберите направление, установите ширину, высоту и цвет, и скопируйте готовое правило.
Как пользоваться
- Выберите направление, в котором указывает треугольник — вверх, вниз, влево, вправо или один из четырех клиновидных углов 90 градусов (верхний левый, верхний правый, нижний правый, нижний левый).
- Выберите технику: трюк с границей или полигон
clip-path(см. ниже, что выбрать). - Перетаскивайте ширину и высоту до тех пор, пока предпросмотр не будет выглядеть правильно. Каждое направление полностью изменяемо по размеру, включая углы.
- Установите цвет и, если хотите, имя класса — оно используется как в правиле CSS, так и в фрагменте HTML.
- Скопируйте CSS и фрагмент
<div>, или загрузите предпросмотр SVG, если вы предпочитаете отправлять изображение.
Трюк с границей или clip-path?
Трюк с границей придает элементу width: 0; height: 0 и толстую border. Поскольку соседние границы встречаются вдоль диагонали, каждый из четырех регионов границы сам по себе является треугольником — раскрасьте один, сделайте остальные три transparent, и видимый результат — треугольник. Это работает в любом когда-либо отправленном браузере, включая почтовые клиенты, вот почему это все еще по умолчанию.
Его цена в том, что область содержимого не остается. Вы не можете поместить текст или значок внутри элемента, вы не можете дать треугольнику градиент или фоновое изображение, и вы не можете анимировать его форму — только ширину его границ.
clip-path: polygon() сохраняет реальный прямоугольник width × height с реальным background, а затем обрезает все за пределами трех точек. Это означает, что треугольник может иметь градиент, фоновое изображение или тень коробки (через filter: drop-shadow()), и сам полигон может быть переведен. Поддержка универсальна в современных браузерах, но отсутствует в устаревших движках и ненадежна в почте.
Практическое правило: clip-path для чего-либо на современном сайте, трюк с границей для максимального охвата или для крошечных декоративных стрелок, где ни одно ограничение не имеет значения.
Что означают цифры
Для кардинального треугольника ширина — это длина основания, а высота — это расстояние от основания до вершины. В сгенерированном правиле границы это появляется как две половины ширины по сторонам (треугольник высотой 100px получает 0 50px 100px 50px).
Для клина угла ширина и высота — это два катета прямого угла, и они напрямую отображаются на две ширины границы — без деления пополам. Это также причина того, что клины углов здесь изменяемы по размеру, даже несмотря на то, что некоторые генераторы блокируют их на квадрат.
Работает ли на моей машине?
Да. Правило, фрагмент HTML и предпросмотр SVG — все это создается в вашем браузере — ничего не загружается, и инструмент работает в автономном режиме после загрузки страницы.
Могу ли я использовать это для подсказки или стрелки раскрывающегося меню?
Это классическое использование. Создайте небольшой треугольник, указывающий вниз (скажем, 12 × 6), затем расположите его с помощью position: absolute по отношению к телу подсказки. Используйте здесь технику границы — стрелка декоративная, поэтому отсутствие области содержимого вас ничего не стоит, и вы получаете поддержку везде.
Что если мне нужна другая форма?
Для чего-либо с более чем тремя точками — шестиугольников, звезд, стрелок, речевых пузырей — используйте Генератор CSS Clip-Path, который создает произвольные полигоны и другие формы клипа. Чтобы скруглить углы обычного прямоугольника, см. Генератор Border Radius; чтобы повернуть или перекосить треугольник после того, как вы его получите, Генератор CSS Transform пишет соответствующее значение transform.