Як зробити в css трикутник: найзручніші способи

Дуже часто сучасні красиві веб-сторінки містять багато привабливих графічних елементів. Серед них використовується така проста геометрична фігура як трикутник, який застосовують для дизайну безлічі елементів. Наприклад, їх використовую в якості покажчика на якийсь об`єкт на сторінці, щоб відвідувач сайту звернув свою увагу на нього. Звичайно, основна функція трикутника - декоративна, так як блоки, що містять їх, стають більш сучасними і привабливими.

Не всі знають, як створювати такі фігури за допомогою каскадних таблиць стилів, і задаються питанням про те, як зробити трикутник в CSS.

Застосування в оформленні сайтів

У веб-дизайні трикутники зустрічаються всюди. Ними оформляються підказки, меню, всілякі елементи призначеного для користувача інтерфейсу. Іноді їх застосовують при створенні індикатора процесу завантаження. І якщо раніше можна було обходитися без них, то зараз це неможливо, і розробники зобов`язані пристосовуватися до таких вимог. Адже сьогодні створений в CSS трикутник - це найважливіша частина в побудові взаємної зв`язку між частинами інтерфейсу і об`єднанні в єдине ціле.

Багато верстальники дивуються, коли їм приходить макет, в дизайні якого часто-густо трикутники. Адже немає властивостей, які б безпосередньо створювали цю геометричну фігуру. Насправді є кілька методів, що дозволяють це зробити.

Спосіб створення за допомогою рамки

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

При завданні нульових висоти і ширини об`єкта, а також установці товстої кордону, можна побачити квадрат, який складається з чотирьох рівних трикутників. Хитрість полягає в тому, що потрібно залишити тільки необхідну кордон, а інші зробити прозорими. І ось, виходить намальований в CSS трикутник потрібного напрямку і кольору.

Створювати кути за допомогою властивості «рамки» зручно, тому що немає необхідності в малюванні картинки, використовуючи будь-якої графічний редактор. Параметри трикутника завжди можна змінити в коді. А ще це економить час розробнику. Комбінуючи різну ширину рамки, достатньо легко отримати фігуру. Для розуміння того, як це функціонує, можна просто створити порожній елемент нульової довжини, висотою і дуже товстої рамкою різного кольору з кожної зі сторін. Так, роблячи три сторони з чотирьох прозорими, отримують трикутники різних видів:

• трикутник, що дивиться вліво, сторони якого рівні;
• трикутник, що дивиться вліво і сплющений;
• витягнутий трикутник, що дивиться вліво;
• прямокутний трикутник, у якого прямий кут зліва;
• трикутник, що дивиться вниз;
• трикутник, що дивиться вгору;
• трикутник, що дивиться вправо і безліч інших різновидів.

Використання псевдоедементов

За допомогою таких прийомів можна створювати куточки у спливаючих вказівок і підказок. Для того щоб прикріпити за допомогою CSS трикутник до блоку, найчастіше програмісти використовують такі псевдоелементи як after і before. Якщо використовувати їх разом, то можна намалювати в CSS трикутник, який має обведення.

Комбінуючи їх, розробники створюють безліч красивих стрілок, застосовуючи властивість position: relative до батьківського елементу. Це робиться для того, щоб псевдоелементи НЕ з`їхали зі своїх місць.

Відео: DIY School Supplies! 10 Weird DIY Crafts for Back to School with DIY Lover!

Плюсами використання рамки CSS для створення трикутників є:

• швидке і легке редагування розміру і кольору за допомогою властивостей;
• підтримка усіма браузерами.

мінуси:

• так як використовуються рамки, немає можливості застосувати градієнти, тіні;
• іноді, коли користувач дивиться сторінки в браузері Firefox, значення прозорості може не спрацювати, і це буде спотворювати картинку.

Використання готової картинки

Наступний метод створення трикутників - це застосування закодованої картинки. Трикутник заздалегідь малюється в графічному редакторі і конвертується в спеціальний код за допомогою спеціалізованих сервісів.

Плюсом такого способу є те, що можна зробити дуже красивий дизайн з тінями, градієнтами і рамками і потім просто все це закодувати. А до мінусів можна віднести те, що не кожен добре володіє графічними програмами. До того ж, якщо зображення має дуже великий розмір, то рядок коду виходить просто величезною. Це незручно для розробника.

Окремим пунктом стоїть використання браузерів Internert Explorer старих версій. У них цей спосіб просто не буде працювати.

Метод перевернутого квадрата

Одним із способів є створення засобами CSS перевернутого квадрата. Тут необхідні два блоки. Але деякі використовують псевдоелементи.

Спочатку створюється квадрат. Він буде вмістом що повертається елемента. Потім його розгортають на 45 градусів, щоб він став схожим на алмаз. Потім проводиться зрушення вгору, і зовнішній блок ховається за допомогою властивості overflow: hidden. Це рішення також не є кросбраузерності, і іноді картинка буде відображатися не так, як хотілося б.

підсумки

Відео: Відео для дітей. Ксюша, Настя - Майстер Клас по ОРИГАМИ. Як зробити закладку?

Отже, існує безліч методів для створення трикутника. Тільки як не загубитися у всіх цих властивостях CSS? Довідник в такому випадку завжди виручить. У ньому описані всі властивості каскадних таблиць стилів.

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