Share
In deze zelfstudie leer je drie manieren om gemakkelijk schuine randen te maken met SVG. Om te beginnen gebruiken we een inline SVG, dan gebruiken we een SVG-achtergrond op een pseudo-element, voordat we eindigen met een Sass-mixin. Laten we erin duiken!
Als ik 'schuine randen' zeg, verwijs ik naar dingen als de achtergrond op de website van Stripe:
stripe.comOf de overlays op deze website:
skidpasset.seDeze zouden eenvoudig genoeg zijn om te maken met behulp van een grafische applicatie; je zou het ontwerp kunnen maken, exporteren als een enkele afbeelding en laden in je webpagina. Als u echter meer flexibiliteit wilt, moet u die aanpak vergeten. Laten we eens kijken naar enkele alternatieve manieren om schuine randen te krijgen.
Voordat we verdergaan, moet je, als je jezelf moet herinneren aan de basisprincipes van de handcodering van SVG, het volgende bespreken:
Laten we beginnen met een SVG, in een container, in onze opmaak:
We komen terug op de details van wat we zojuist hebben gedaan. Voeg nu enkele basisstijlen toe om onze held enkele dimensies en een verloopachtergrond te geven:
body achtergrondkleur: #eaeaea; .hero positie: relatief; hoogte: 300 px; achtergrondafbeelding: lineair verloop (# 4568dc, # b06ab3);
Dat geeft ons het volgende:
Maar laten we ons voorstellen dat we die onderkant willen hebben als een hoek die naar rechts omhoog gaat. Dat doen we met onze SVG. Daarin gaan we een polygoon maken met enkele puntcoördinaten:
Je ziet nu een grote zwarte driehoek rechtsonder op je pagina. Via onze CSS kunnen we die driehoek aanpassen aan onze behoeften, deze vullen zoals onze achtergrond, zodat de held onderaan lijkt te zijn gesneden:
svg positie: absoluut; onderkant: 0; breedte: 100%; hoogte: 10vw; vul in: #eaeaea;
Dat geeft ons:
Onze tweede benadering verbetert de eerste, omdat inhoud binnen het grijze gebied niet wordt afgesneden door een grijze driehoek te bedekken. We zullen opnieuw worden met een eenvoudige container-div:
Deze keer controleren we de maskering allemaal vanuit onze CSS, te beginnen met de heldenstijlen die we in de laatste demo hebben gebruikt:
body achtergrondkleur: #eaeaea; .hero positie: relatief; hoogte: 300 px; achtergrondafbeelding: lineair verloop (# 4568dc, # b06ab3);
Nu voegen we een pseudo-element toe aan onze held, waaraan we de SVG als achtergrondafbeelding toevoegen. Ten eerste moeten we onze SVG coderen zodat we deze ook in CSS kunnen gebruiken. Dus pak de SVG-code die we de vorige keer hebben geschreven, verander de punten in 0,0 100,0 0,100 om hem om te draaien, ga naar URL-encoder voor SVG en plak de inhoud in de doos:
Kopieer de Klaar voor CSS fragment en plak het in de pseudo-element stijlen:
Accentsconagua
.hero :: after background-image: url ("data: image / svg + xml,% 3Csvg xmlns =" http://www.w3.org/2000/svg "viewBox =" 0 0 100 100 "preserveAspectRatio =" geen "% 3E% 3Cpolygon points =" 0,0 100,0 0,100 "/% 3E% 3C / svg% 3E"); U kunt ook een toevoegen vullen =" attribuut als je wilt, na de Viewbox attribuut bijvoorbeeld. Voeg wat meer eigenschappen toe om het pseudo-element te positioneren en te vergroten:
.hero :: after background-image: url ("data: image / svg + xml,% 3Csvg xmlns =" http://www.w3.org/2000/svg "viewBox =" 0 0 100 100 "fill =" tomaat "preserveAspectRatio =" none "% 3E% 3Cpolygon points =" 0,0 100,0 0,100 "/% 3E% 3C / svg% 3E"); achtergrond-positie: middelpunt; achtergrondherhaling: geen herhaling; achtergrondformaat: 100% 100%; inhoud: "; hoogte: 10vw; breedte: 100%; positie: absoluut; onder: -10vw;Dat geeft ons dit:
Dankzij onze Ziggy Stardust-kleuren kunnen we onze SVG op deze manier duidelijk zien. Nu hoeven we alleen maar de driehoek te kleuren (met behulp van de vullen =" attribuut), zodat het dezelfde kleur heeft als het paarse onder aan het verloop:
Notitie: met dank aan Bob Proctor voor het erop wijzen dat hex-waarden in het kenmerk fill niet door FireFox worden herkend. U moet RGB- of HSL- of naamwaarden gebruiken.
Er is een reden die we hebben gebruikt vw eenheden voor de hoogte van onze SVG: we willen dat de hoek van onze driehoek consistent blijft, ongeacht de breedte van de viewport. Als we zouden gebruiken px eenheden, zou de hoogte van de driehoek niet veranderen voor smallere schermen, waardoor de hoek van de driehoek acuter zou worden. Probeer het zelf!
Deze laatste benadering gebruikt een Sass-mixin om al het zware werk te doen, maar het bereikt in essentie wat we in het vorige voorbeeld hebben gedaan. Ga naar de GitHub-repository van Angled Edges, pak de mixin en neem deze op in je project (ik ga het hele ding in het SCSS-venster van een CodePen-project plakken).
Voeg vervolgens onze oude vriend de held div toe aan je markup. Voeg ook de basisstijlen toe, zodat we het gebruikelijke gradiënteffect van 300 px krijgen.
Vervolgens, binnen onze .held we voegen de mixin toe:
@include hoek-rand ();
De parameters die we nodig hebben, zijn als volgt: we hebben onze driehoek nodig buiten de held, bij de bodem. De positie van het punt waar de hoek begint is rechtsonder, de kleur die we zoeken is paars # b06ab3, en dan zal de hoogte van de driehoek zijn 100. De beperking hiervan is dat de mixin geen relatieve waarden accepteert voor de hoogte of de breedte.
Onze mixin ziet er als volgt uit:
@ omvat de schuine rand ("buiten onder", "rechtsonder", # b06ab3, 100);En dit is wat we krijgen:
Raadpleeg de GitHub-repo voor meer informatie over de beschikbare parameters. Bedankt aan Joseph Fusco voor zijn harde werk.
Dus daar hebben we het; drie methoden voor het bereiken van schuine randen. Elk heeft zijn voordelen, en het oefenen van een ieder geeft je een goed begrip van hoe SVG's kunnen worden gemanipuleerd voor visueel effect.
