UTILS.
100% у браузері

Генератор CSS-трикутників

Генеруйте чистий CSS-трикутник у будь-якому напрямку та копіюйте CSS.

Про цей інструмент

Створюйте чистий CSS-трикутник за допомогою класичного трюку з рамкою — оберіть напрямок, розмір і колір, а потім копіюйте правило. Попередній перегляд оновлюється наживо, і все працює у вашому браузері.

Поширені запитання

Як працює трюк із рамкою?
Елемент із нульовою шириною та висотою показує лише свої рамки; якщо зробити три рамки прозорими, залишиться одна кольорова рамка у формі трикутника.
Чому ширина й висота встановлені на 0?
Без площі блоку рамки сходяться в центрі, тож єдина видима рамка стає чистим трикутником, а не товстим краєм.

Більше інструментів