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

Що це за інструмент?

У CSS немає окремої форми трикутника, тому трикутники будуються відомим обхідним шляхом: взяти елемент із нульовою шириною й нульовою висотою, надати йому суцільний бордюр з одного боку та прозорі бордюри з двох інших сусідніх боків. Оскільки сусідні бордюри зустрічаються під кутом 45 градусів, прозорі бордюри звужуються до точки, залишаючи видимим лише кольоровий бордюр у формі трикутника.

Цей інструмент будує цю структуру за вас: виберіть, у який бік має вказувати трикутник, наскільки великим він має бути й якого кольору, а потім спостерігайте, як оновлюється живий попередній перегляд, і скопіюйте точний CSS. Той самий базовий прийом використовується по всьому вебу для стрілок на чистому CSS, вказівників підказок і стрілок випадаючих меню.

Джерело: CSS Backgrounds and Borders Module Level 3, W3C — визначає, як сусідні краї бордюрів зустрічаються під кутом, що є механізмом, на якому базується ця техніка трикутника.

Навіщо його використовувати?

• Живий попередній перегляд рендерить реальний трикутник, тож ви можете підтвердити розмір, напрямок і колір перед копіюванням чого-небудь.
• Охоплює всі чотири базові напрямки — вгору, вниз, вліво, вправо — одним елементом керування.
• Не потрібні файли зображень чи SVG — трикутник, побудований таким чином, це лише кілька рядків CSS.
• Корисно для вказівників підказок, стрілок випадаючих меню/акордеонів, кастомних маркерів списку та простих декоративних форм.
• Працює повністю у вашому браузері — нічого з того, що ви налаштовуєте, нікуди не завантажується.
• Безкоштовно, без реєстрації, працює на мобільних пристроях.

Як користуватися

1. Виберіть напрямок — трикутник вказує вгору, вниз, вліво чи вправо залежно від того, на який бік припадає суцільний бордюр.
2. Задайте розмір — це контролює значення border-width на всіх трьох боках і визначає, наскільки великим виглядає трикутник.
3. Виберіть колір для видимого (суцільного) бордюра, який стає кольором заливки трикутника.
4. Скопіюйте згенерований CSS і застосуйте його до елемента з width: 0 і height: 0 — порожній <div> чи псевдоелемент на кшталт ::before/::after підходять однаково добре.

Приклад

Введення

Direction: down · Size: 60px · Color: #ea580c

Результат

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Для трикутника, що вказує вниз, суцільний колір розташовується на border-top, тоді як лівий і правий бордюри залишаються прозорими — протилежна сторона від напрямку, куди вказує трикутник.

Чому важлива нульова ширина й висота

Прийом працює лише тому, що елемент не має власного блока вмісту — width: 0 і height: 0 означають, що вся видима форма формується виключно з бордюрів, що зустрічаються в центральній точці. Якщо елемент має будь-яку ширину чи висоту, бордюри більше не звужуються в чітку точку, і форма ламається. Це також причина, чому техніка однаково добре працює на порожньому <div> чи на псевдоелементі ::before/::after з content: "" — реальний вміст не потрібен, лише блок бордюрів.

Документація MDN про властивість CSS border охоплює, як поєднуються border-width, border-style та border-color, включно з тим, як бордюри на сусідніх сторонах зустрічаються по діагоналі (developer.mozilla.org/en-US/docs/Web/CSS/border) — геометричний факт, на якому побудована вся ця техніка.

Типові застосування CSS трикутників

• Вказівники підказок і мовних бульбашок: маленький трикутник (6-10px), розташований на краю заокругленого блока, забарвлений відповідно до фону блока.
• Стрілки випадаючих списків і select: маленький трикутник, що вказує вниз, поруч із кнопкою чи елементом select, щоб позначити, що він відкриває меню.
• Індикатори розгортання акордеона: трикутник, що вказує вправо і обертається, вказуючи вниз, коли розділ розгорнуто.
• Кастомні маркери списку: маленький трикутник, що вказує вправо, замість стандартного маркера браузера, для більш виразного стилю списку.
• Прості кути банерів/стрічок: трикутник, вставлений у кут картки, щоб імітувати ефект загорнутої стрічки.

Поєднання з іншими CSS-інструментами

Трикутники, що використовуються як вказівники підказок, зазвичай потребують відповідної тіні, щоб візуально поєднуватися з блоком, до якого вони прикріплені — Генератор Box Shadow створює цю тінь. Для UI-форм, що виходять за межі трикутників (шеврони, зірки, шестикутники), clip-path зазвичай є кращим сучасним підходом, ніж накопичення додаткових прийомів із border.

→ Генератор box-shadow · Генератор border-radius

Часті запитання