Генератор трикутників 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.