Creați forme geometrice folosind css, css

În opinia mea, una dintre cele mai interesante inovații în CSS3. Este abilitatea de a utiliza un număr mai mic de imagini în web design și de a crea diferite forme.

În lecția de astăzi vom crea forme geometrice, folosind doar proprietățile CSS3.

Ceea ce va trebui să utilizați acest ghid

cerc

HTML
Pentru a crea un cerc cu ajutorul CSS. În primul rând, vom folosi tag-ul div. Apelarea piesele sale ID-ul. Deci, în primul exemplu, ID-ul este egal cu cerc:

CSS
În ceea ce privește CSS. Trebuie doar să setați valorile de lățime și înălțime. și apoi se setează valoarea razei de frontieră. egală cu jumătate din lățimea și înălțimea:

HTML
Pentru a crea un pătrat în CSS. ca în exemplul de cerc, vom crea un div cu ID pătrat. Deci, mai jos este codul pentru blocul div:

CSS
Pentru a crea un pătrat în CSS. Trebuie doar să setați valorile de lățime și înălțime sunt egale între ele:

dreptunghi

HTML
Pentru a crea o forma dreptunghiulara in CSS. ca și în cazul unui pătrat, înființat un div. unde ID-ul este același dreptunghi:

CSS
La fel ca și în cazul pătrat, vom specifica valorile pentru lățime și înălțime. dar de data aceasta lățimea este mai mare decât înălțimea:

HTML
Pentru a crea un oval în CSS. Vom crea un div cu un ID de oval:

CSS
Oval similar cu un cerc; o formă ovală dreptunghiulară, cu o rază predeterminată egală cu jumătate din înălțimea:

triunghi

HTML
Și din nou, pentru a crea un triunghi folosind CSS. Facem un div cu un ID de triunghi.

CSS
Pentru a crea un triunghi, vom manipula proprietatea de frontieră. Prin varierea lățimea marginii, veți obține diferite unghiuri de rotație:

triunghi Downward

HTML
Creați un triunghi inversat cu CSS. a crea din nou un div. ID triangle_down egal:

CSS
Crearea unui triunghi inversat, opera grosime de frontieră:

Triunghi cu vârful spre stânga

HTML
Pentru a crea o formă triunghiulară, care arată spre stânga, din nou, a crea un div cu ID-ul triangle_left:

CSS
Crearea unui triunghi îndreptat spre stânga, care operează proprietăți dreapta ale triunghiului de frontieră:

Triunghi cu vârful spre dreapta

HTML
Pentru a crea o formă triunghiulară, care arată spre dreapta, a crea un div cu ID-ul triangle_right:

CSS
Crearea unui triunghi îndreptat spre dreapta, exploata proprietățile din dreapta ale triunghiului de frontieră:

HTML
Pentru a crea un „diamant“ forma, a crea un div cu diamant ID:

CSS
Rhombus pot fi create în mai multe moduri. Folosind proprietatea de transformare, împreună cu valorile proprietăților se rotesc. putem afișa cele două triunghiuri adiacente unul celuilalt:

HTML
Pentru a crea o formă „trapez“, creând un div cu un ID de trapez.

CSS
Trapez pot fi create prin setarea aceleași valori ale frontierei stânga și la dreapta, cu o limită inferioară plată:

paralelogram

HTML
Pentru a crea un „paralelogram“ forma, a crea un div cu un ID de paralelogram:

CSS
Pentru a crea o paralelogram valoare stabilită oblic egală transformare pentru rotirea elementului la un unghi de 30 de grade:

HTML
Pentru a crea o „stea“ forma, creând un div cu un ID de stele:

CSS
Crearea de forme „stea“ - o secvență de manipulare stranie a limitelor folosind transforma proprietatea setată să se rotească. A se vedea codul de mai jos:

Steaua (6-final)

HTML
Pentru a crea o figură „șase colțuri stele“, a crea un div cu un ID de paralelogram:

CSS
stea în șase puncte este creat folosind frontiera de proprietate. Creați două seturi de cifre și se combină într-un singur:

pentagon

HTML
Pentru a crea „pentagon“ forma, a crea un div cu un ID de pentagon:

CSS
Crearea pentagonului este crearea a două elemente, care sunt apoi combinate într-una singură. Primul element - forma unui trapez. Apoi se adaugă forma triunghiulară de mai sus:

hexagon

HTML
Pentru a crea un forme „cu cap hexagonal“ a creat un div cu un ID de Hexagon:

CSS
Există mai multe modalități de a crea un hexagon. Una dintre ele este identică cu crearea unui pentagon. Creați o formă dreptunghiulară și la partea de sus a unui triunghi se adaugă două:

octogon

HTML
Pentru a crea „octogon“ forma, a crea un div cu ID-octogon:

CSS
Octagon este, de asemenea, o figură interesantă. În primul rând, vom crea doua formă trapezoidală și două triunghiuri plasate la partea. Există mai multe moduri, dar cele mai eficiente:

HTML
Pentru a crea o „inimă“ forma, a crea un div cu ID-ul de inima:

CSS
Această cifră este destul de greu de stabilit, dar se poate face prin rotirea elementelor la unghiuri diferite și de a schimba valoarea proprietății de transformare-origine pentru schimbarea poziției elementelor rotative:

HTML
Pentru a crea o figură „ou“, a crea un div cu ou ID:

CSS
„Ou“ Conceptul de formă este similar cu conceptul de formă „ovală“, cu excepția înălțimii proprietăților. care este mai mare decât lățimea. Și o notă specială în figura atașată raza de proprietate. Cu selectarea valorilor sale pot obține rezultatul dorit:

infinit

HTML
Pentru a crea un „infinit“ de formă, de a crea un div cu ID-ul infinit:

CSS
Figura „infinit“ poate fi creat de proprietate atentă la frontieră manipulare și jantei de aliniere:

HTML
Pentru a crea o figură "Biblia", a crea un div cu ID-ul comment_bubble:

CSS
Această cifră poate fi creată prin crearea unui triunghi și setarea proprietăților raza de frontieră. și apoi aderarea la dreptunghiul la partea stanga:

HTML
Pentru a crea o figură «Pacman», a crea un div cu ID-ul pacman:

CSS
Crearea pacman - întregul truc. Manipulează proprietăți și raza de frontieră pentru a crea un cerc cu o latură deschisă stânga:

concluzie

Există o mulțime de oportunități pentru a crea forme folosind CSS3. Puteți utiliza figura ca parte a design-ul, în plus, acestea au o „cârjă“ acceptabil în cazul browserelor epoca Jurassic, în asemănarea cu Internet Explorer.

Traducerea articolului «Fa-forme cu CSS: Cum de a crea diferite forme în CSS» a fost pregătit de o echipă de proiect prietenos Web design de la A la Z.