Înainte de a începe. Dacă doriți mai mult conținut gratuit, dar în format video. Nu ratați canalul meu Youtube, unde public videoclipuri săptămânale pe codul FrontEnd.

https://www.youtube.com/user/Weibenfalk

———-

Sunteți nou în dezvoltarea web și CSS? V-ați întrebat vreodată cum sunt făcute acele forme frumoase pe care le vedeți pe internet? Nu mă mai mira. Ai ajuns la locul potrivit.

Mai jos voi explica principalele elemente de bază ale creării de forme cu CSS. Există mult să vă povestesc despre acest subiect! Prin urmare, nu voi acoperi toate (departe de toate) instrumentele și formele, dar acest lucru ar trebui să vă ofere o idee de bază despre modul în care formele sunt create cu CSS.

Unele forme necesită mai multe „remedieri și trucuri” decât altele. Crearea de forme cu CSS este de obicei o combinație de utilizare lățime, înălțime, sus, dreapta, stânga, margine, jos, transforma și pseudo-elemente precum :inainte de și :după. De asemenea, avem proprietăți CSS mai moderne pentru a crea forme cu like formă-afară și clip-path. Voi scrie despre ele mai jos.

CSS Shapes – Modul de bază

Folosind câteva trucuri în CSS, am reușit întotdeauna să creăm forme de bază, cum ar fi pătratele, cercuri, și triunghiuri cu proprietăți CSS regulate. Să ne uităm la câteva dintre ele acum.

Pătrate și dreptunghiuri

Patratele și dreptunghiurile sunt probabil cele mai ușoare forme de realizat. În mod implicit, un div este întotdeauna un pătrat sau un dreptunghi.

Setați lățimea și înălțimea așa cum se arată în codul de mai jos. Apoi, este doar o chestiune de a da elementului o culoare de fundal. Puteți avea orice alte proprietăți doriți pe element.

#square {
    background: lightblue;
    width: 100px;
    height: 100px;
}
Forme CSS explicate Cum sa desenati un cerc un triunghi
Un pătrat CSS


Cercuri

Este aproape la fel de ușor să creezi un cerc. Pentru a crea un cerc putem seta raza chenarului pe element. Acest lucru va crea colțuri curbate pe element.

Dacă îl setăm la 50%, se va crea un cerc. Dacă setați o lățime și o înălțime diferite, vom obține în schimb un oval.

#circle {
    background: lightblue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
1611701706 229 Forme CSS explicate Cum sa desenati un cerc un triunghi
Un cerc CSS

Triunghiuri

Triunghiurile sunt puțin mai complicate. Trebuie să setăm marginile elementului pentru a se potrivi cu un triunghi. Setând lățimea și înălțimea la zero pe element, lățimea reală a elementului va fi lățimea chenarului.

Rețineți că marginile marginilor unui element sunt diagonale de 45 de grade între ele. De aceea această metodă funcționează pentru a crea un triunghi. Prin setarea uneia dintre margini la o culoare solidă și a celorlalte margini la transparente, aceasta va lua forma unui triunghi.

1611701706 34 Forme CSS explicate Cum sa desenati un cerc un triunghi
Bordurile CSS au margini unghiulare
#triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid lightblue;
}
1611701706 947 Forme CSS explicate Cum sa desenati un cerc un triunghi
Un triunghi CSS

Dacă doriți să aveți un triunghi / săgeată îndreptat într-o altă direcție Puteți modifica valorile de margine corespunzătoare părții pe care doriți să fie vizibilă. Sau puteți roti elementul cu transforma proprietate dacă vrei să fii cu adevărat elegant.

 #triangle {
     width: 0;
     height: 0;
     border-top: 40px solid transparent;
     border-right: 80px solid lightblue;
     border-bottom: 40px solid transparent;
 }
1611701707 454 Forme CSS explicate Cum sa desenati un cerc un triunghi
Un alt triunghi CSS

Bine – este o introducere în formele de bază cu CSS. Probabil că există o cantitate nesfârșită de forme la care vă puteți gândi să creați. Acestea sunt doar elementele fundamentale, dar cu puțină creativitate și determinare puteți obține o mulțime doar cu proprietăți CSS de bază.

În unele cazuri, cu forme mai avansate, este, de asemenea, o idee bună să utilizați pseudo-selectoarele: after și: before. Acest lucru nu intră în sfera acestui articol, deși intenția mea este de a acoperi elementele de bază pentru a vă ajuta să mergeți.

Dezavantaj

Există un mare dezavantaj cu abordarea de mai sus. De exemplu, dacă doriți ca textul dvs. să curgă și să vă înfășoare forma. O divizare HTML obișnuită cu fundal și margini pentru a forma forma nu va permite acest lucru. Textul nu se va adapta și nu va circula în jurul formei tale. În schimb, acesta va curge în jurul divului în sine (care este un pătrat sau un dreptunghi).

Mai jos este o ilustrație care arată triunghiul și modul în care va curge textul.

1611701707 147 Forme CSS explicate Cum sa desenati un cerc un triunghi

Din fericire, avem în schimb câteva proprietăți CSS moderne.

CSS Shapes – invers

În zilele noastre avem o proprietate numită forma-exterior de utilizat în CSS. Această proprietate vă permite să definiți o formă pe care textul o va înfășura / curge.

Împreună cu această proprietate avem câteva forme de bază:

medalion()
cerc()
elipsă()
poligon()

Iată un sfat: Puteți utiliza și clip-path proprietate. Puteți crea forma cu asta în același mod, dar nu va lăsa textul să se înfășoare în jurul formei dvs., așa cum o face forma exterioară.

Elementul căruia urmează să-i aplicăm forma cu proprietatea shape-outside trebuie să fie plutit. De asemenea, trebuie să aibă o lățime și o înălțime definite. Este foarte important de știut!

Puteți citi mai multe despre de ce aici. Mai jos este, de asemenea, un text pe care l-am preluat de pe linkul furnizat către developer.mozilla.org.

shape-outside proprietatea este specificată folosind valorile din lista de mai jos, care definesc zona de plutire pentru elementele plutitoare. Zona flotantă determină forma în jurul căreia se înfășoară conținutul inline (elemente flotante).

medalion()

Tipul inset () poate fi utilizat pentru a crea un dreptunghi / pătrat cu un offset opțional pentru textul de împachetare. Vă permite să furnizați valori în ceea ce privește cât de mult doriți ca textul de ambalare să se suprapună peste formă.

Puteți specifica decalajul să fie același pentru toate cele patru direcții astfel: inserare (20 px). Sau poate fi setat individual pentru fiecare direcție: inserare (20 px 5 px 30 px 10 px).

Puteți utiliza și alte unități pentru a seta decalajul, de exemplu, procent. Valorile corespund astfel: inserare (sus dreapta jos stânga).

Consultați exemplul de cod de mai jos. Am specificat că valorile inserării trebuie să fie de 20 px în partea de sus, 5 px în dreapta, 30 px în partea de jos și 10 px în stânga. Dacă doriți ca textul dvs. să meargă în jurul pătratului dvs., puteți săriți cu inset (). În schimb, setați fundalul pe div și specificați dimensiunea ca de obicei.

 #square {
     float: left;
     width: 100px;
     height: 100px;
     shape-outside: inset(20px 5px 30px 10px);
     background: lightblue;
 }
1611701707 223 Forme CSS explicate Cum sa desenati un cerc un triunghi
Textul este compensat de valorile specificate. În acest caz, 20 px în partea de sus, 5 px în dreapta, 30 px în partea de jos și 10 px în stânga

De asemenea, este posibil să se acorde inset () o a doua valoare care specifică raza frontierei insetului. Ca mai jos:

 #square {
     float: left;
     width: 100px;
     height: 100px;
     shape-outside: inset(20px 5px 30px 10px round 50px);
     background: lightblue;
 }
1611701707 150 Forme CSS explicate Cum sa desenati un cerc un triunghi
raza chenarului a fost setată la 50 px pe inserție

cerc()

În acesta se creează un cerc folosind forma-exterior proprietate. De asemenea, trebuie să aplicați un clip-path cu proprietatea corespunzătoare pentru ca cercul să apară.

clip-path proprietatea poate lua aceeași valoare ca proprietatea exterior-formă, astfel încât să îi putem oferi standardul cerc() forma pe care am folosit-o forma-exterior. De asemenea, rețineți că am aplicat o marjă de 20 px pe elementul de aici pentru a da textului spațiu.

#circle {
    float: left;
    width: 300px;
    height: 300px;
    margin: 20px;
    shape-outside: circle();
    clip-path: circle();
    background: lightblue;
}
1611701707 890 Forme CSS explicate Cum sa desenati un cerc un triunghi
Textul curge în jurul formei!

În exemplul de mai sus, nu specific raza cercului. Acest lucru se datorează faptului că vreau să fie la fel de mare pe cât este div (300px). Dacă doriți să specificați o dimensiune diferită pentru cerc, puteți face acest lucru.

Cercul () ia două valori. Prima valoare este raza și a doua valoare este poziția. Aceste valori vor specifica centrul cercului.

În exemplul de mai jos am setat raza la 50%. Apoi am deplasat centrul cercului cu 30%. Rețineți că cuvântul „la” trebuie utilizat între valorile de rază și poziție.

De asemenea, am specificat o altă valoare de poziție pe calea clipului. Acest lucru va tăia cercul în jumătate pe măsură ce mișc poziția la zero.

 #circle {
      float: left;
      width: 150px;
      height: 150px;
      margin: 20px;
      shape-outside: circle(50% at 30%);
      clip-path: circle(50% at 0%);
      background: lightblue;
    }
1611701707 418 Forme CSS explicate Cum sa desenati un cerc un triunghi

elipsă()

Elipsele funcționează la fel ca cercurile, cu excepția faptului că creează un oval. Puteți defini atât valoarea X, cât și valoarea Y, astfel: elipsa (25px 50px).

La fel ca un cerc, ia și o valoare de poziție ca ultima valoare.

   #ellipse {
      float: left;
      width: 150px;
      height: 150px;
      margin: 20px;
      shape-outside: ellipse(20% 50%);
      clip-path: ellipse(20% 50%);
      background: lightblue;
    }
1611701707 616 Forme CSS explicate Cum sa desenati un cerc un triunghi

poligon()

Un poligon este o formă cu vârfuri / coordonate diferite definite. Mai jos creez o formă “T” care este prima literă pe numele meu. Încep de la coordonatele 0,0 și mă deplasez de la stânga la dreapta pentru a crea forma “T”.

#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;
    }
1611701707 156 Forme CSS explicate Cum sa desenati un cerc un triunghi

Imagini

De asemenea, puteți utiliza imagini cu fundal transparent pentru a vă crea forma. Ca această lună frumoasă rotundă de mai jos.

Aceasta este o imagine .png cu un fundal transparent.

1611701707 324 Forme CSS explicate Cum sa desenati un cerc un triunghi
<img src="https://www.freecodecamp.org/news/css-shapes-explained-how-to-draw-a-circle-triangle-and-more-using-pure-css/src/moon.png" id="moon" />
#moon {
      float: left;
      width: 150px;
      height: 150px;
      shape-outside: url("./src/moon.png");
    }
1611701707 724 Forme CSS explicate Cum sa desenati un cerc un triunghi

Si asta e! Mulțumesc că ai citit.

Despre autorul acestui articol

Numele meu este Thomas Weibenfalk și sunt dezvoltator din Suedia. Creez în mod regulat tutoriale gratuite pe canalul meu de Youtube. Există, de asemenea, câteva cursuri premium pe React și Gatsby. Nu ezitați să mă vizitați pe aceste linkuri:

Twitter – @weibenfalk,
Weibenfalk pe Youtube,
Weibenfalk Site-ul cursurilor.