Objašnjeni CSS oblici: Kako nacrtati krug, trokut i više pomoću čistog CSS-a

Prije nego što počnemo. Ako želite više besplatnog sadržaja, ali u video formatu. Ne propustite moj Youtube kanal gdje tjedno objavljujem video zapise na FrontEnd kodiranju.

//www.youtube.com/user/Weibenfalk

----------

Jeste li novi u web razvoju i CSS-u? Jeste li se ikad zapitali kako nastaju ti lijepi oblici koje vidite po cijelom internetu? Ne čudim se više. Došli ste na pravo mjesto.

U nastavku ću objasniti same osnove stvaranja oblika pomoću CSS-a. Postoji puno reći o ovoj temi! Stoga neću pokriti sve (daleko od svih) alate i oblike, ali ovo bi vam trebalo dati osnovnu ideju o tome kako se oblici stvaraju pomoću CSS-a.

Neki oblici zahtijevaju više "popravaka i trikova" od drugih. Stvaranje oblika pomoću CSS-a obično je kombinacija upotrebe širine, visine, vrha, desne, lijeve, obruba, dna, transformacije i pseudo-elemenata poput : prije i : poslije. Također imamo modernija svojstva CSS-a za stvaranje oblika sa sličnim oblikom izvan i isječkom. O njima ću također pisati u nastavku.

CSS oblici - osnovni način

Pomoću nekoliko trikova u CSS smo uvijek bili u stanju stvoriti osnovne oblike kao što su trgovi , krugova , i trokuta s redovitim CSS svojstva. Pogledajmo sada nekoliko njih.

Kvadrati i pravokutnici

Kvadrati i pravokutnici vjerojatno su najlakši oblici za postizanje. Prema zadanim postavkama div je uvijek kvadrat ili pravokutnik.

Širinu i visinu postavljate kako je prikazano u donjem kodu. Tada je stvar samo u tome da elementu damo boju pozadine. Možete imati sva druga svojstva koja želite na elementu.

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

Krugovi

Gotovo je jednako lako stvoriti krug. Da bismo stvorili krug, elementu možemo postaviti radijus obruba. To će stvoriti zakrivljene kutove na elementu.

Ako ga postavimo na 50%, stvorit će se krug. Ako postavite drugu širinu i visinu, umjesto toga dobit ćemo oval.

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

Trokuti

Trokuti su malo nezgodniji. Moramo postaviti granice na elementu tako da odgovaraju trokutu. Postavljanjem širine i visine na nulu na elementu, stvarna širina elementa bit će širina obruba.

Imajte na umu da su rubni rubovi elementa međusobno dijagonale od 45 stupnjeva. Zato ova metoda djeluje na stvaranju trokuta. Postavljanjem jedne granice na jednobojnu, a ostalih granica na prozirnu, poprimit će oblik trokuta.

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

Ako želite imati trokut / strelicu usmjerenu u drugom smjeru Možete promijeniti vrijednosti obruba koje odgovaraju onoj strani na kojoj želite biti vidljive. Ili možete rotirati element sa svojstvom transformiranja ako želite biti stvarno fensi.

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

U redu - to je uvod u osnovne oblike s CSS-om. Vjerojatno postoji nepregledna količina oblika kojih se možete sjetiti. To su samo osnove, ali uz malo kreativnosti i odlučnosti možete postići puno sa samo osnovnim CSS svojstvima.

U nekim slučajevima, s naprednijim oblicima, također je dobro koristiti pseudo selektore: after i: before. Ovo je izvan opsega ovog članka, jer mi je namjera pokriti osnove za pokretanje.

Hendikep

Gore navedeni pristup ima jedan veliki nedostatak. Na primjer, ako želite da vaš tekst teče i omota vaš oblik. Uobičajeni HTML div s pozadinom i obrubima koji čine oblik to neće dopustiti. Tekst se neće prilagoditi i strujati oko vašeg oblika. Umjesto toga, on će teći oko samog div-a (koji je kvadrat ili pravokutnik).

Ispod je ilustracija koja prikazuje trokut i kako će tekst teći.

Srećom imamo neka moderna CSS svojstva koja ćemo umjesto toga koristiti.

CSS Oblici - obrnuto

Danas imamo svojstvo koje se naziva shape-outside za upotrebu u CSS-u. Ovo svojstvo omogućuje vam definiranje oblika oko kojeg će se tekst omotati / prevlačiti.

Uz ovo svojstvo imamo nekoliko osnovnih oblika:

uložak ()

krug()

elipsa()

poligon()

Evo savjeta : Također možete koristiti svojstvo clip-path . Možete stvoriti svoj oblik s tim na isti način, ali to neće dopustiti da se tekst omota oko vašeg oblika kao što to čini oblik izvana.

Element na koji ćemo primijeniti oblik sa svojstvom shape-outside mora se plutati. Također mora imati definiranu širinu i visinu. To je stvarno važno znati!

Više o tome zašto možete pročitati ovdje. Ispod je i tekst koji sam preuzeo s navedene veze na developer.mozilla.org.

shape-outsideObjekt je navedeno pomoću vrijednosti iz popisa u nastavku, koji definiraju float prostor za float elemenata. Plutajuće područje određuje oblik oko kojeg će se umotati ugrađeni sadržaj (plutajući elementi).

uložak ()

Tip inset () može se koristiti za stvaranje pravokutnika / kvadrata s neobaveznim pomakom za tekst omatanja. Omogućuje vam da navedete vrijednosti koliko želite da se vaš omotni tekst preklapa s oblikom.

Možete odrediti pomak da bude jednak za sva četiri smjera poput ovog: inset (20px). Ili se može pojedinačno podesiti za svaki smjer: umetak (20px 5px 30px 10px) .

Možete koristiti i druge jedinice da biste postavili pomak, na primjer, posto. Vrijednosti odgovaraju ovako: uložak (gore desno dolje lijevo) .

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.