Пояснення форм CSS: Як намалювати коло, трикутник та інше за допомогою чистого CSS

Перш ніж ми почнемо. Якщо ви хочете більше безкоштовного вмісту, але у відеоформаті. Не пропустіть на своєму каналі Youtube, де я щотижня публікую відеоролики з кодуванням FrontEnd.

//www.youtube.com/user/Weibenfalk

----------

Ви новачок у веб-розробці та CSS? Ви коли-небудь замислювались, як створюються ті приємні фігури, які ви бачите в Інтернеті? Більше не дивуйся. Ви потрапили в потрібне місце.

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

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

Форми CSS - основний спосіб

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

Квадрати і прямокутники

Квадрати та прямокутники - це, мабуть, найпростіші форми для досягнення. За замовчуванням div - це завжди квадрат або прямокутник.

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

#square { background: lightblue; width: 100px; height: 100px; }

Кола

Створити коло майже так само просто. Для створення кола ми можемо встановити радіус кордону для елемента. Це створить вигнуті кути на елементі.

Якщо ми встановимо його на 50%, це створить коло. Якщо ви встановите різну ширину та висоту, то замість цього ми отримаємо овал.

#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }

Трикутники

Трикутники трохи складніші. Ми повинні встановити межі елемента так, щоб вони відповідали трикутнику. Встановивши для елемента ширину та висоту для нуля, фактична ширина елемента буде шириною межі.

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

#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }

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

 #triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }

Гаразд - це вступ до основних фігур за допомогою CSS. Ймовірно, існує нескінченна кількість форм, які ви можете придумати створити. Це лише основи, але, додавши трохи креативу та рішучості, ви можете досягти багатьох завдяки лише основним властивостям CSS.

У деяких випадках з більш досконалими фігурами також непогано використовувати псевдоселектори: after і: before. Це виходить за рамки цієї статті, оскільки я маю намір охопити основи, щоб допомогти вам.

Недолік

Існує один великий недолік із вищезазначеним підходом. Наприклад, якщо ви хочете, щоб ваш текст обтікав і обгортав вашу фігуру. Звичайний HTML-div з фоном і рамками для складання фігури цього не дозволяє. Текст не буде адаптуватися і обтікати вашу форму. Натомість він буде обтікати сам div (який є квадратом або прямокутником).

Нижче наведена ілюстрація, що показує трикутник і течію тексту.

На щастя, ми маємо використовувати деякі сучасні властивості CSS.

Форми CSS - інший шлях

У наш час ми маємо властивість під назвою shape-outside для використання в CSS. Ця властивість дозволяє визначити фігуру, яку текст буде обертати / обтікати.

Поряд з цією властивістю ми маємо кілька основних форм:

вставка ()

коло ()

еліпс ()

багатокутник ()

Ось порада : Ви також можете використовувати властивість clip-path . Ви можете створити свою фігуру таким самим способом, але це не дозволить тексту обертатися навколо вашої фігури, як це робить фігура зовні.

Елемент, до якого ми збираємося застосувати форму, із властивістю shape-outside повинен бути плаваючим. Він також повинен мати визначену ширину та висоту. Це справді важливо знати!

Детальніше про те, чому, ви можете прочитати тут. Нижче також текст, який я взяв із наданого посилання на developer.mozilla.org.

shape-outsideВластивість задається з допомогою значення зі списку нижче, які визначають область з плаваючою точкою для поплавцевих елементів. Площа поплавця визначає форму, навколо якої обмотується вбудований вміст (елементи поплавця).

вставка ()

Тип inset () можна використовувати для створення прямокутника / квадрата з необов’язковим зміщенням для тексту обтікання. Це дозволяє вказати значення того, наскільки ви хочете, щоб текст обтікання перекривав фігуру.

Ви можете вказати, що зміщення має бути однаковим для всіх чотирьох напрямків, як це: inset (20px). Або його можна встановити індивідуально для кожного напрямку: вставка (20px 5px 30px 10px) .

Ви також можете використовувати інші одиниці, щоб встановити зміщення, наприклад, відсоток. Значення відповідають так: вставка (верхній правий нижній лівий) .

Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; }

It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; }

circle()

In this one a circle is created using the shape-outside property. You also have to apply a clip-path with the corresponding property for the circle to show up.

The clip-path property can take the same value as the shape-outside property so we can give it the standard circle() shape that we used for shape-outside. Also, note that I've applied a 20px margin on the element here to give the text some space.

#circle { float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; }

In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.

The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.

In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.

I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.

 #circle { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; }

ellipse()

Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: ellipse(25px  50px).

The same as a circle, it also takes a position value as the last value.

 #ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; }

polygon()

A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.

#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; }

Images

You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.

This is a .png image with a transparent background.

#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }

And that's it! Thank you for reading.

About the author of this article

My name is Thomas Weibenfalk and I'm a developer from Sweden. I regularly create free tutorials on my Youtube channel. There's also a few premium courses out there on React and Gatsby. Feel free to visit me on these links:

Twitter — @weibenfalk,

Weibenfalk on Youtube,

Weibenfalk Courses Website.