Використовуємо CSS у створенні геометричних фігур: 13 прикладів нескладних форм
Одне з нововведень у CSS, що захоплює, це можливість використання меншої кількості зображень у веб-дизайні та створення різних фігур прямо в коді. У статті ми наведемо приклади, як використовуємо CSS у створенні геометричних фігур.
13 прикладів геометричних фігур
Тепер усі ті фігури, які раніше вимагали створення у графічних редакторах, можна легко реалізувати за допомогою CSS. Нові властивості, такі як transform та border-radius, дозволяють робити це без необхідності вдаватися до сторонніх програм.
5 актуальних геометричних форм із використанням CSS
У таблиці нижче ми використовуємо CSS для створення геометричних фігур. У ній буде розглянуто створення 5 різних актуальних форм на сьогодні.
| Фото | Геометрична фігура | Опис | Код CSS |
|---|---|---|---|
 | Форма кола | Спочатку встановлюємо значення width і height для елемента, а потім встановлюємо значення border radius, яке дорівнює половині значення width і height | #circle { width: 100px; height: 100px; background: red; border-radius: 50% } |
 | Квадратна форма | Для створення квадрата в CSS просто задаємо значення width і height рівні один одному | #square { width: 100px; height: 100px; background: red; } |
 | Прямокутник | Як і у випадку з квадратом, ми встановлюємо значення width і height, але цього разу значення width буде більшим, ніж значення height | #rectangle { width: 200px; height: 100px; background: red; } |
 | Овал | Овал нагадує коло; він є прямокутною формою з певним радіусом, який дорівнює половині значення висоти | #oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; } |
 | Паралелограм | Для створення паралелограма встановлюємо значення transform рівне skew для повороту елемента на кут 30 градусів | #parallelogram { width: 150px; height: 100px; transform: skew(20deg); background: red; } |
Використовуємо CSS у створенні 8 унікальних геометричних фігур
Найкращі форми, на думку редакції, які привертатимуть увагу читачів у 2024 році.
Форма стріли із вигнутим хвостом
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
transform: rotate(45deg);
}Лупа
#magnifying-glass {
font-size: 10em;
display: inline-block;
width: 0.4em;
box-sizing: content-box;
height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass:before {
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em;
height: 0.08em;
transform: rotate(45deg);
}П’ятикутна зірка
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}П’ятикутна форма
#pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}Серце
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}Алмаз
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
box-sizing: content-box;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}Форма діалогу
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}12 кінцева форма багатокутника
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
transform: rotate(30deg);
}
#burst-12:after {
transform: rotate(60deg);
}
Використовуємо CSS у створенні геометричних фігур – альтернативний спосіб
Сьогодні ми можемо використовувати властивості CSS під назвою shape-outside. Воно дозволяє нам визначити форму, навколо якої текст повинен обтікати чи вписуватися до неї. Для shape-outside доступні кілька базових геометричних фігур:
- inset()
- circle()
- ellipse()
- polygon()
Також можна використовувати властивість clip-path для створення потрібної фігури. Однак ця властивість не забезпечує обтікання текстом навколо фігури, як shape-outside.
Елемент, якому ви хочете задати форму геометричної фігури, повинен бути плаваючим (floated) та мати певні ширину та висоту. Це дуже важливо!
Ми пропонуємо приклад circle() для більшого візуального розуміння.
Circle()
Створюємо коло за допомогою властивості shape-outside. Також застосовуємо властивість clip-path із відповідним значенням.
circle {
float: left;
width: 300px;
height: 300px;
margin: 20px;
shape-outside: circle();
clip-path: circle();
background: lightblue;
}Властивість clip-path може приймати ті ж значення, що й shape-outside, тому ми можемо задати стандартну фігуру circle(), використовувану в shape-outside. Зверніть увагу, що ми також додали відступи (margin) у 20px для елемента, щоб текст мав деякий простір навколо фігури.
Підсумок
За допомогою CSS є безліч способів створення різних фігур, які можна використовувати у вашому дизайні. Це дозволяє додати креативність та оригінальність вашому веб-сайту або додатку. Крім того, важливо пам’ятати про підтримку старих браузерів, таких як Internet Explorer, і використовувати відповідні альтернативні методи забезпечення сумісності. Сподіваюся, це керівництво виявилося корисним для вас. У блоці коментарів ви також можете ділитися власними методами створення фігур за допомогою CSS.
Примітка! Існують різні способи застосування принципів CSS. У новій статті на нашому порталі ви дізнаєтеся, як створюється анімація появи блоку за допомогою CSS з покроковими методами застосування принципів CSS для створення плавних анімацій та ефектів на веб-сайті.
Не пропустите эти статьи
Як зробити адаптивне відео YouTube на CSS
Розглянемо кілька способів, як зробити адаптивне відео YouTube на CSS та помістити на сайт таким…
Блокова модель у CSS: висота блоку та пропорції
Блокова модель CSS (box model) застосовується до елементів, які розглядаються як блоки, визначаючи, як різні…
Висота блоку залежно від ширини: висота та пропорції на CSS
Висота блоку залежно від ширини визначається в різних одиницях CSS: дюймах (in), пікселях (px), пунктах…
Як зробити прелоадер: покроковий спосіб додавання Preloader для сайту
Ми покажемо, як зробити прелоадер у вигляді анімації з появою на екрані під час завантаження.…