Share
În acest tutorial veți afla trei moduri de a crea muchii înclinate ușor folosind SVG. Pentru început, vom folosi un SVG inline, apoi vom folosi un fundal SVG pe un pseudo-element, înainte de a termina cu un mixer Sass. Hai să ne aruncăm!
Când spun "margini înclinate" mă refer la lucruri precum fundalul de pe site-ul Stripe:
stripe.comSau suprapunerile de pe acest site web:
skidpasset.seAcestea ar fi destul de ușor pentru a crea utilizând o aplicație grafică; puteți crea designul, puteți exporta ca un singur grafic și puteți încărca pagina web. Cu toate acestea, dacă doriți mai multă flexibilitate, ar trebui să uitați această abordare. Să ne uităm la câteva modalități alternative de a obține muchii înclinate.
Înainte de a merge mai departe, dacă aveți nevoie să vă reamintiți de elementele de bază ale SVG-ului de codificare manuală, Kezz v-ați acoperit:
Să începem cu un SVG, într-un container, în marcajul nostru:
Vom reveni la detaliile a ceea ce am făcut într-un moment. Acum adaugati cateva stiluri de baza pentru a da eroului nostri cateva dimensiuni si fundal gradient:
corp fundal-culoare: #eaeaea; .ro poziție: relativă; înălțime: 300px; fundal-imagine: gradient linear (# 4568dc, # b06ab3);
Acest lucru ne oferă următoarele:
Dar să ne imaginăm că vrem să avem acea margine inferioară ca un unghi care merge spre dreapta. O să facem asta cu SVG-ul nostru. În el, vom crea un poligon cu coordonate punctuale:
Acum veți vedea un triunghi negru mare, în partea dreaptă a paginii. Prin CSS putem modela acest triunghi pentru a ne satisface nevoile, umplând-o la fel ca și fundalul nostru, astfel încât eroul pare să fi fost tăiat în partea de jos:
svg position: absolute; fund: 0; lățime: 100%; înălțime: 10vw; umple: #eaeaea;
Asta ne dă:
Cea de-a doua abordare se îmbunătățește pe prima, deoarece conținutul din zona gri nu va fi tăiat prin suprapunerea unui triunghi gri. Vom fi din nou cu un simplu container div:
De data aceasta vom controla mascarea tot din interiorul CSS-ului nostru, incepand cu stilurile eroului pe care le-am folosit in ultima demonstratie:
corp fundal-culoare: #eaeaea; .ro poziție: relativă; înălțime: 300px; fundal-imagine: gradient linear (# 4568dc, # b06ab3);
Acum vom adăuga un pseudo-element eroului nostru, la care vom adăuga SVG ca imagine de fundal. În primul rând, va trebui să codificăm SVG-ul nostru, astfel încât să îl putem folosi de fapt în CSS. Așa că luați codul SVG pe care l-am scris ultima oară, schimbați punctele la 0,0 100,0 0,100 pentru a le răsturna, a vă deplasa spre encoder-ul URL pentru SVG și lipiți conținutul în cutie:
Copiați Gata pentru CSS fragmentul și inserați-l în stilurile pseudo-elemente:
Accentsconagua
.erou :: după background-image: url ("data: image / svg + xml,% 3Csvg xmlns =" http://www.w3.org/2000/svg "viewBox =" 0 100 100 "preserveAspectRatio = nici unul "% 3E% 3Colori poligon =" 0,0 100,0 0,100 "/% 3E% 3C / svg% 3E"); De asemenea, puteți adăuga a umple =“ atributul dacă doriți, după viewBox atribut, de exemplu. Adăugați mai multe proprietăți pentru a poziționa și a mări pseudo-elementul:
.erou :: după background-image: url ("date: image / svg + xml,% 3Csvg xmlns =" http://www.w3.org/2000/svg "viewBox =" 0 0 100 100 " tomate "preserveAspectRatio =" nici unul "% 3E% 3Coli de polipi =" 0,0 100,0 0,100 "/% 3E% 3C / svg% 3E"); fundal-poziție: centru centru; background-repeat: nu-repeta; dimensiunea fundalului: 100% 100%; conținut: "; înălțimea: 10vw; lățimea: 100%; poziția: absolut; partea de jos: -10vw;Acest lucru ne oferă acest lucru:
Datorită culorilor noastre Ziggy Stardust putem vedea în mod clar SVG-ul nostru ca acesta. Acum trebuie doar să coloreze triunghiul (folosind umple =“ atribut) astfel încât să aibă aceeași culoare ca și purpuria de la baza gradientului:
Notă: mulțumită lui Bob Proctor pentru a arăta că valorile hex din atributul de umplere nu par să fie recunoscute de FireFox. Va trebui să utilizați valorile RGB, HSL sau numele.
Există un motiv pe care l-am folosit vw unități pentru înălțimea SVG: dorim ca unghiul triunghiului nostru să rămână consistent, indiferent de lățimea portului de vizualizare. Dacă ar fi să folosim px , înălțimea triunghiului nu s-ar schimba pentru ecrane mai înguste, ceea ce ar face unghiul triunghiului mai acut. Incearca-l tu insuti!
Această abordare finală folosește un mixer Sass pentru a face toate ridicările grele, dar în esență realizează ceea ce am făcut în exemplul anterior. Mergeți la GitHub Replici de la margini Angled, luați mixinul și includeți-l în proiectul dvs. (o să lipiți totul în fereastra SCSS a unui proiect CodePen).
Apoi, adăugați vechiul nostru prieten erou div la marcajul dvs. Adăugați și stilurile de bază, astfel încât să obținem efectul gradient obișnuit de 300px.
Apoi, în interiorul nostru .erou adaugam amestecul:
@ includeți marginea unghiulară ();
Parametrii de care avem nevoie sunt după cum urmează: avem nevoie de triunghiul nostru in afara eroul, la fund. Poziția punctului în care începe unghiul este dreapta jos, culoarea pe care o vedem este violet # b06ab3, și apoi înălțimea triunghiului va fi 100. Limitarea este că mixinul nu acceptă valori relative pentru înălțime sau lățime.
Mixinul nostru arată astfel:
@ include marginea unghiulară ("partea inferioară din afară", "dreapta jos", # b06ab3, 100);Iată ce obținem:
Pentru mai multe detalii despre parametrii disponibili, consultați repo GitHub. Mulțumim lui Joseph Fusco pentru munca lui grea.
Deci, noi o avem; trei metode pentru realizarea muchiilor unghiulare. Fiecare are meritele sale, iar practicarea fiecăruia vă va oferi o înțelegere solidă a modului în care SVG-urile pot fi manipulate pentru efect vizual.
