Обяснени 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 свойства.

В някои случаи, с по-напреднали форми, също е добра идея да използвате: след и: преди псевдо селектори. Това обаче е извън обхвата на тази статия, тъй като моето намерение е да обхвана основите, за да ви помогна.

Недостатък

Има един голям недостатък при горния подход. Например, ако искате текстът ви да тече наоколо и да увие вашата форма. Редовен 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.