CSS трикутники. Як це працює?
Як намалювати CSS трикутник — поетапна візуалізація
Ми звикли, що в 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 пікселів.
Все ще не схоже на трикутник, але давайте кожній рамці встановимо свій колір.
Тепер видно, що одна рамка — це трапеція, верхня основа якої дорівнює 50 пікселів — це ширина/висота нашого прямокутника. Нижня основа 150 пікселів — розмір прямокутника + ширина сусідніх рамок з двох сторін.
Трикутник уже зовсім близько, достатньо лише зменшити верхню основу трапеції до нуля, тому ми зменшимо розміри прямокутника до нуля.
Тепер у нас є 4 трикутники, спрямовані в різні сторони. Різні рамки — різні трикутники. Якщо зробити прозорими три з чотирьох рамок, то отримаємо один трикутник. Для зручності центрування, ширину протилежної рамки краще зробити рівною нулю.
Відповідно, якщо потрібен трикутник, спрямований вправо, потрібно встановити розмір і колір для border-left, зробити прозорим або встановити в нуль розмір border-right, решта рамок повинні мати розмір, але бути прозорими.
Знаючи таку особливість рамок, можна створювати трапеції, збільшувати ширину або висоту фігур, повертати їх у різні сторони, змінювати нахил бічних сторін.
CSS — дуже гнучка мова, яка дозволяє вирішувати завдання різними способами. Вона надає багато можливостей, які не завжди очевидні. Але розуміння основ мови та принципів відображення дозволяє краще орієнтуватися в повсякденних задачах.
Дякую за те, що дочитали!
Побачимось наступного разу! 🤹🏻♀️
