CSS трикутники. Як це працює?

Як намалювати CSS трикутник — поетапна візуалізація

Anna Prykhodko
2 min readFeb 16, 2021
Photo by Chris Ashe on Unsplash

Ми звикли, що в CSS все є прямокутниками. Відносно легко зрозуміти концепцію кола, закруглюємо рамки — отримуємо коло або овал. Але що на рахунок інших фігур?

Часто, щоб створити трикутник на CSS, достатньо просто знайти код, схожий на цей:

.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}

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

Спочатку намалюємо простий прямокутник з заливкою розміром 50 на 50 пікселів і кольоровими товстими рамками шириною також 50 пікселів.

Жовтий прямокутник розміром 50x50 з рожевими рамками

Все ще не схоже на трикутник, але давайте кожній рамці встановимо свій колір.

Жовтий прямокутник розміром 50x50 з різнокольоровими рамками

Тепер видно, що одна рамка — це трапеція, верхня основа якої дорівнює 50 пікселів — це ширина/висота нашого прямокутника. Нижня основа 150 пікселів — розмір прямокутника + ширина сусідніх рамок з двох сторін.

Трикутник уже зовсім близько, достатньо лише зменшити верхню основу трапеції до нуля, тому ми зменшимо розміри прямокутника до нуля.

Прямокутник розміром 0x0 з різнокольоровими рамками

Тепер у нас є 4 трикутники, спрямовані в різні сторони. Різні рамки — різні трикутники. Якщо зробити прозорими три з чотирьох рамок, то отримаємо один трикутник. Для зручності центрування, ширину протилежної рамки краще зробити рівною нулю.

Відповідно, якщо потрібен трикутник, спрямований вправо, потрібно встановити розмір і колір для border-left, зробити прозорим або встановити в нуль розмір border-right, решта рамок повинні мати розмір, але бути прозорими.

Чотири різнокольорові трикутники

Знаючи таку особливість рамок, можна створювати трапеції, збільшувати ширину або висоту фігур, повертати їх у різні сторони, змінювати нахил бічних сторін.

Чотири різні фігури

CSS — дуже гнучка мова, яка дозволяє вирішувати завдання різними способами. Вона надає багато можливостей, які не завжди очевидні. Але розуміння основ мови та принципів відображення дозволяє краще орієнтуватися в повсякденних задачах.

Дякую за те, що дочитали!
Побачимось наступного разу! 🤹🏻‍♀️

--

--

Anna Prykhodko
Anna Prykhodko

Written by Anna Prykhodko

Front-end developer · Kyiv 🇺🇦

Responses (1)