Створюємо геометричні фігури за допомогою CSS

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

Всі ті фігури, які ви малювали раніше в графічних редакторах, тепер можна зробити за допомогою CSS3 . Нові CSS властивості transform та border-radius дозволяють робити це, не вдаючись до допомоги сторонніх програм.

У сьогоднішньому уроці ми створимо геометричні фігури, використовуючи лише властивості CSS3.

Оновлено: 2024-01-10 21:36:22 Вадим Дворніков автор матеріалу

Що вам знадобиться для використання цього посібника

Завантажити вихідні файли
Переглянути демонстрацію

Окружність

HTML
Для створення кола за допомогою CSS , по-перше, ми будемо використовувати div тег . Іменуємо його ID ім'ям фігури. Отже, у першому прикладі, ID дорівнюватиме Circle :

 CSS  
Що стосується CSS, просто задаємо значення width і height, а потім задаємо значення border radius, що дорівнює половині від width і height:

Квадрат

HTML
Щоб створити квадрат у CSS, як і в прикладі з коло, ми створюємо div з ідентифікатором square. Отже, нижче наведено код для блоку div:

 CSS  
Для створення квадрата в CSS просто задаємо значення width і height рівні один одному:

Прямокутник

HTML
Щоб створити прямокутну форму, CSS , як і у випадку з квадратом, налаштовуємо div , де ID дорівнює rectangle :

 CSS  
Так само, як і у випадку з квадратом, ми задамо значення width і height, але цього разу width буде більше, ніж height:

Овал

Дізнайтеся, як зробити рамку CSS, застосовуючи властивість border до елементів.

HTML
Для створення овалу в CSS створюємо div з ID рівним oval:

 CSS  
Овал схожий на коло; овал це прямокутна форма із заданим радіусом, рівним половині значення height :

Трикутник

HTML
І знову, для створення трикутника за допомогою CSS робимо div з ID рівним triangle .

CSS
Для створення трикутника ми маніпулюватимемо властивістю border . Змінюючи ширину кордону, ви отримаєте різні кути повороту:

Трикутник, спрямований вниз

HTML
Створюємо перевернутий трикутник за допомогою CSS. Знову створюємо div. ID одно triangle_down :

 CSS  
Створюючи перевернутий трикутник, оперуємо завтовшки кордону:

Трикутник, спрямований вліво

HTML
Для створення трикутної фігури, яка дивиться вліво, знову створюємо div із ID triangle_left :

 CSS  
Створюючи трикутник, спрямований вліво, оперуємо властивостями меж правої сторони трикутника:

Трикутник, спрямований праворуч

HTML
Для створення трикутної фігури, яка дивиться праворуч, створюємо div з ID triangle_right :

 CSS  
Створюючи трикутник, спрямований праворуч, оперуємо властивостями меж правої сторони трикутника:

Ромб

Що таке px пояснюється як базова одиниця виміру в веб-дизайні, що є 'піксель'.

HTML
Для створення фігури "ромб", створюємо div з ID diamond:

 CSS  
Ромб можна створити кількома способами. Використовуючи властивість transform спільно зі значеннями властивості rotate, ми можемо відобразити два трикутники, розташовані поруч один з одним:

Трапеція

HTML
Для створення фігури "трапеція", створюємо div з ID рівним trapezium.

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

Паралелограм

HTML
Для створення фігури «паралелограм» створюємо div з ID рівним parallelogram :

 CSS  
Для створення паралелограма, встановлюємо значення transform, що дорівнює skew для повороту елемента на кут в 30 градусів:

Зірка

HTML
Для створення фігури "зірка", створюємо div з ID рівним star :

 CSS  
Створення фігури "зірка" - послідовність дивних маніпуляцій з кордонами з використанням властивості transform рівним rotate. Дивіться код нижче:

Зірка (6ти кінцева)

HTML
Для створення фігури "шісткінцева зірка", створюємо div з ID рівним parallelogram:

 CSS  
Шестикутна зірка створюється за допомогою властивості border. Створюємо два набори фігур і комбінуємо в одну:

П'ятикутник

HTML
Для створення фігури «п'ятикутник» створюємо div з ID рівним pentagon :

 CSS  
Створення п'ятикутника полягає у створенні двох елементів, які з'єднуються в один. Перший елемент – форма трапеції. Потім зверху додаємо трикутну форму:

Шестикутник

HTML
Для створення фігури шестикутник, створюємо div з ID рівним hexagon :

 CSS  
Є кілька способів створення шестикутника. Один із них повністю ідентичний створенню п'ятикутника. Створюємо прямокутну форму і зверху додаємо два трикутники:

Восьмикутник

HTML
Для створення фігури "восьмикутник", створюємо div з ID octagon:

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

#octagon < width: 100px; height: 100px; background: #ac60ec; position: relative; >#octagon:before < content: ""; width: 42px; height: 0; position: absolute; top: 0; left: 0; border-bottom: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; >#octagon:after < content: ""; width: 42px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; >>

Серце

HTML
Для створення фігури "серце", створюємо div з ID heart:

 CSS  
Ця фігура досить складна у створенні, але її можна зробити за допомогою обертання елементів під різними кутами та зміни значення властивості transform-origin для зміни позиції елементів, що обертаються:

Яйце

HTML
Для створення фігури "яйце", створюємо div з ID egg:

 CSS  
Концепція фігури "яйце" схожа на концепцію фігури "овал", за винятком властивості height, яке більше, ніж width. І особливу увагу в цій фігурі надається властивості radius. За допомогою підбору його значень можна досягти потрібного результату:

Нескінченність

HTML
Для створення фігури "нескінченність", створюємо div з ID infinity:

 CSS  
Фігура «нескінченність» може бути створена шляхом акуратної маніпуляції властивістю border та встановлення кутів кола:

Бабл для коментаря

HTML
Для створення фігури «бібл» створюємо div з ID comment_bubble :

 CSS  
Ця фігура може бути створена шляхом створення трикутника і завдання властивості border radius а потім приєднання прямокутника до його лівої сторони:

Pacman

HTML
Для створення фігури "pacman", створюємо div з ID pacman:

 CSS  
Створення pacman – ціла хитрість. Маніпулюйте властивостями border і radius для створення кола з відкритою лівою стороною:

Висновок

Є безліч можливостей створення фігур за допомогою CSS3. Ви можете використовувати фігури як частину вашого дизайну, до того ж у них є прийнятний «милиця» у випадку браузерів епохи юрського періоду, на зразок Internet Explorer.

Сподіваюся, вам сподобався цей посібник. У блоці коментарів ви можете наводити власні способи створення фігур з посібника.

Коментарі

1 це коло, а не коло .

Квадратики, це звичайно цікаво,
але ніде не знайшов, як таку фігуру зліпити, як на скріншоті.
Можливо таке?

Скопійована з хаба

Доброго дня.
Ви можете підказати як намалювати в css таке коло?

Генератор трикутників, якщо комусь цікаво:

Ось тут я написав за яким принципом виконати зірку.

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

Ну, а в останньому прикладі замість останніх чотирьох властивостей можна було вказати одне: border-radius: 70px. Втім, мабуть, приклади підібрані те щоб показати що одні й самі властивості можна ставити іноді різними якостями.

Щоб зрозуміти як працює восьмикутник необхідно зробити його на білому тлі. Тоді видно, що грані не обрізаються, а просто межа, за допомогою якої зроблено ефект переходу, збігається за кольором із тлом, у якому знаходиться восьмикутник. Для того, щоб не залежати від фону, необхідно зробити вихідним не квадрат, а прямокутник і до нього зробити дві трапеції.
Цікавим є співвідношення розмірів. 29 ширина переходу + 42 ширина грані + 29 ширина другого переходу = 100 пікселів, що дорівнює квадрату.
При цьому, якщо виходити з того, що грані повинні дорівнювати, то 29 пікселів переходу повинні утворювати грань в 42 пікселі. Оскільки 29 пікселів це катет прямокутного трикутника, а грань - його гіпотенуза, то, за теоремою Піфагора, 29 у квадраті (841) + ще стільки ж (сума квадратів катетів 1682) має дорівнювати 42 у квадраті (1764).
Ну майже. 🙂

rotate()

rotate() CSS - це функція властивості transform , яка дозволяє обертати елементи в 2D площині на вказаний кут.

Синтаксис

transform: rotate(45deg);

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

Задаючи позитивне число в дужках у rotate() , ми цим повертаємо елемент за годинниковою стрілкою, якщо негативне, тоді проти годинникової.

transform: rotate(-45deg);

Одиниці виміру

Для того, щоб задати кут обертання rotate() можна використовувати наступні одиниці вимірювання.

• deg (градуси) - один повний оборот елемента навколо осі дорівнюватиме 360deg. Градуси інтуїтивно зрозумілі, дозволяють точно вказати кут і тому більш поширені.
• rad (радіани) - одиниця виміру кута, що відповідає дузі, довжина якої дорівнює її радіусу. Повний оборот відповідає 2π (360 градусів) або приблизно 6.28318rad, відповідно 1π (180 градусів) це 3.14159rad. Радіани зручні під час роботи з тригонометричними функціями і можуть знадобитися при інтеграції з деякими бібліотеками.
• grad (градіани) - гради використовуються рідко, тут повний оборот (360 градусів) дорівнює 400grad.
• turn (обороти) - один оборот дорівнює 360 градусів, відповідно 0.5turn еквівалентно 180deg.

Центр обертання

За промовчанням rotate() обертає елемент навколо центру, але точку обертання можна змінити, скориставшись властивістю transform-origin .

У цьому прикладі точка встановлюється у верхньому лівому кутку:

transform-origin: left top;

Тут у нижньому правому:

transform-origin: bottom right;

Також існують інші значення властивості transform-origin , які дають можливість задати різні точки обертання.

Осі обертання

rotate() обертає елемент навколо осі Z, проте для реалізацій 3D-анімацій є функції, що дозволяють обертати об'єкти по осі X і Y.

transform: rotateX(90deg);

transform: rotateY(90deg);

Також є функція rotateZ() , яка еквівалента rotate() і частіше використовується в 3D анімації, для кращої читання коду, оскільки явно вказує на вісь обертання.

Поєднання rotate() з іншими функціями

Для більш складних візуальних ефектів можна поєднувати rotate() в одному рядку з іншими функціями перетворення, такими як translate() , scale() і skew() .

transform: rotate(90deg) skew(30deg) scale(1.5) translate(10px, 5px);

Працюючи з кількома трансформаціями варто враховувати порядок, у якому застосовуються. Різні послідовності можуть надавати різні візуальні ефекти.

transform

Трансформує елемент, зокрема дозволяє його масштабувати, обертати, зрушувати, нахиляти, а також комбінувати види трансформацій.

Синтаксис

Значення

Функції трансформації

matrix

rotate

Повертання елемента на заданий кут щодо точки трансформації, що задається властивістю transform-origin .

scale

Масштаб елемента по горизонталі та вертикалі.

transform: scale(sx[, sy]);

Значення більше 1 збільшує масштаб елемента, менше 1 зменшує масштаб.

scaleX

Масштабує елемент по горизонталі.

scaleY

Масштабує елемент з вертикалі.

skewX

Нахиляє елемент на поставлений кут по вертикалі.

skewY

Нахиляє елемент на заданий кут горизонталі.

translate

Зсув елемент на задане значення по горизонталі та вертикалі.

transform: translate(tx[, ty])

translateX

Зсув елемент по горизонталі на вказане значення. Позитивне значення зрушує праворуч, негативне вліво.

translateY

Зсув елемент по вертикалі на вказане значення. Позитивне значення зрушує вниз, негативне вгору.

HTML5 CSS3 IE Cr Op Sa Fx

У цьому прикладі при наведенні курсору на зображення воно повертається на 15 градусів за годинниковою стрілкою.

Об'єктна модель

[window.]document.getElementById("elementID").style.transform

Браузери

Internet Explorer 9 підтримує нестандартну властивість -ms-transform.

Chrome, Safari, Android та iOS підтримують нестандартну властивість -webkit-transform.

Opera до версії 12.10 підтримує нестандартну властивість -o-transform.

Firefox до версії 16.0 підтримує нестандартну властивість -moz-transform.