Генератор треугольников CSS

Создавайте треугольники CSS с помощью классического трюка с границей. Задайте направление, размер и цвет, а затем скопируйте фрагмент.

CSS Triangle Generator

Live

Direction

Size60px

Color

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

Создавайте треугольники CSS с помощью трюков с границами — направления, размера и цвета.
Запускается в вашем браузере
Бесплатное использование

Как пользоваться

Выберите направление треугольника.
Установите размер и цвет заливки.
Скопируйте CSS.

How this tool works

Выберите направление треугольника.
Установите размер и цвет заливки.
Скопируйте CSS.

Recommended settings

Сначала используйте параметры по умолчанию, затем при необходимости измените их.

Supported formats

Text / on-page input

File size and limits

Очень сложные многослойные предварительные просмотры могут работать медленнее на старых телефонах.

Privacy

Генераторы цвета и CSS полностью работают в вашем браузере. Предварительный просмотр и преобразование никогда не загружают ваши стили.

Common use cases

Используйте генератор треугольников CSS, когда вам нужно: Создавайте треугольники CSS с помощью рамок — направления, размера и цвета.

Troubleshooting

Предварительный просмотр выглядит по-другому после вставки

Проверьте наличие конкурирующих CSS на вашей странице (сбросы, унаследованные цвета). Сначала скопируйте сгенерированное правило в изолированную таблицу стилей.

FAQ

Это загружает мой CSS?

Нет. Генераторы и преобразователи запускаются в вашем браузере с предварительным просмотром в реальном времени.

Нужен ли мне аккаунт?

Нет. Откройте инструмент, настройте элементы управления и скопируйте CSS.