Schepte Hoeken in 2018

0
47

Toen ik zag dat Chris’ artikel over getande dozen, herinnerde ik me dat ik een uitdaging een tijdje geleden naar een CSS design, zoals hieronder in een cross-browser wijze:

Wat de uitdaging leek.

Het ziet er vrij gelijkaardig aan het concept van de getande vakken, behalve de hoeken zijn nu schepte, en we hebben alleen te maken over een hoek per doos. Dus laten we eens kijken hoe we dat kunnen doen, hoe we het kunnen uitbreiden van de techniek om meerdere hoeken, wat voor problemen we tegenkomen en hoe we die kunnen krijgen om hen heen, met of zonder steun van de browser compromissen.

Het oorspronkelijke idee: box-shadow!

We beginnen met een doos element:

<div class= ” box ” ></div>

We kunnen dit aantal dimensies of laat de afmetingen worden bepaald door de inhoud—het maakt echt niet uit. Voor de eenvoud, wij zijn gewoon een max-width en een min-height. Geven We ook een overzicht zodat we kunnen zien zijn grenzen.

.box {
overzicht: solid 2px;
max-width: 15em;
min-height: 10em;
}

Vervolgens zijn we absoluut de positie van een plein ::voor pseudo-element waarvan u de rand van de lengte gelijk is aan de diameter (of twee keer de straal van $r) van de scoop in de hoek. Ook geven We deze pseudo-element een rode box-shadow en een dummy achtergrond (die we later verwijderen) zodat we het kunnen zien:

$r: 2em;

.box {
position: relative;
/* stijlen als voorheen */

en:before {
position: absolute;
padding: $r;
box-shadow: 0 0 7px #b53;
achtergrond: #95a;
inhoud:”
}
}

En dit is wat we tot nu toe:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Nou, het ziet er niet al te spannende… nog! We gaan nu dus op en maken dit plein een disc door het instellen van border-radius: 50% op het en geef het een negatieve marge gelijk is aan de straal van $r, zodat het middelpunt samenvalt met het (0,0) punt (linksboven) van het bovenliggende venster. Ook willen wij overflow: hidden op de bovenliggende vak, dus dat wat van deze pseudo-element is buiten .het vak wordt uitgesneden.

$r: 2em;

.box {
overflow: hidden;
/* stijlen als voorheen */

en:before {
/* stijlen als voorheen */
marge: -$r;
border-radius: 50%
}
}

Nu zijn we beginnen te zien voor de vorm hebben we al een straatlengte voor:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Maar het is nog niet helemaal wat we willen. Om er te komen, gebruiken we de vierde lengte waarde voor de box-shadow eigendom: de verspreiding straal. Als u behoefte aan een opfriscursus over hoe de box-shadow werkt met deze vier waarden, kunt u kijken op de interactieve demo hieronder:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Je hebt misschien al geraden wat we doen. We verwijderen van de dummy-achtergrond, we nul de eerste drie box-shadow-waarden (de x-en y-offsets en de blur radius) en een vrij groot aantal voor de laatste (de verspreiding radius):

box-shadow: 0 0 0 300px;

De interactieve demo hieronder laat zien hoe het verhogen van de verspreiding radius maakt het meer en meer van haar ouder .doos:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Dus de truc hier is het hebben van een spread straal voldoende groot, zodat het heeft betrekking op de rest van het bovenliggende element. Het koele ding over dit is dat we de box-shadow semi-transparant zijn of van transparante afgeronde hoeken op de ouder .doos:

.box {
/* stijlen als voorheen */
border-radius: 1em;

en:before {
/* stijlen als voorheen */
box-shadow: 0 0 0 300px rgba(#95a, .75);
}
}

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Natuurlijk, net als Chris gewezen in het artikel over de getande vakken, kunnen we de primeur straal van een CSS-variabele en vervolgens eenvoudig wijzigen van de JavaScript-code. Dan is alles updates mooi, zelfs met de inhoud van de tekst in onze doos:

:root { –r: 50px }

.box {
/* stijlen als voorheen */
padding: var(–r);

en:before {
/* stijlen als voorheen */
marge: calc(-1*var(–r));
padding: erven;
}

Merk op dat wanneer we ook de inhoud van de tekst, moeten we een negatieve z-index ::voor pseudo-element en expliciet positie in de hoek als we nu ook nog een padding op de .vakje om te compenseren voor de scoop.

.box {
/* stijlen als voorheen */

en:before {
/* stijlen als voorheen */
z-index: -1;
top: 0;
links: 0
}

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Het toepassen van deze techniek

Nu, laten we verder gaan en kijken hoe we het kunnen toepassen van dit concept om het reproduceren van het ontwerp liet ik in het begin. In dit specifieke geval, de centrale punten van de pseudo-element discs niet samen met doos hoeken, maar buiten, in het midden van de ruimte tussen de dozen.

De structuur is vrij eenvoudig, gewoon een <header> element gevolgd door vier <artikel> elementen die ik heb gemaakt in een Pug loop:

terwijl de n–
artikel
h3 #{[n].naam}
sectie
p #{[n].quote}
een(href=’#’) ga

We maken gebruik van een verpakking flexbox lay-out op de <body> met de <header> echt breed en met een of twee <artikel> – elementen op elke rij, afhankelijk van hoe breed de viewport is.

Landschap (links) vs. staande (rechts) modus.

Als we één <artikel> op elke rij, we hebben niet schepte hoeken, dus de straal is 0px. Anders geven we deze straal –r een niet-nul waarde.

$min-w: 15rem; /* min de breedte van een artikel element */
$m: 1rem; /* door de marge van zo ‘ n element */

html { –r: 0px; }

artikel {
marge: $m;
min-width: $min-w;
breedte: 21em;
}

@media (min-width: 2*($min-w + 2*$m) /* genoeg is voor 2 personen per rij */) {
html { –r: 4rem; }

artikel { width: 40%; }
}

Laten we nu eens gewoon de situatie toen hebben we twee <artikel> elementen per rij (en natuurlijk een uitgeholde hoek voor elk want dat is wat voor ons van belang).

In het geval van de eerste, we beginnen met de meest linkse limiet van de disc langs de rechter rand van de ouder. Dat is links: 100% tot nu toe. Verplaats de x-coördinaat van de disc is het centrale punt op de rechterkant van haar moedermaatschappij, we trekken de schijf van de straal, die brengt ons naar links: calc(100% – var(–r)). Maar we willen het niet aan de rechter kant, we willen dat de verschuiving naar het recht de door de <article> marge $m, die brengt ons naar de uiteindelijke waarde:

links: calc(100% – var(–r) + #{$m});

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Langs de y-as, we beginnen met de bovenste limiet van de disc langs de onderste rand van de ouder—dat is top: 100%. Om de disc is het centrale punt op de onderste rand van de ouder vak, we gaan een straal, die geeft ons top: calc(100% – var(–r)). Tot slot willen we dit centrale punt op $m onder de ouders op de onderste rand, dat geeft ons de uiteindelijke verticale offset van:

top: calc(100% – var(–r) + #{$m});

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor de tweede <article> (tweede op dezelfde rij), we hebben dezelfde waarde in het geval van de verticale offset.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Horizontaal we beginnen echter met de disc ‘ s links limiet wordt samen met haar ouders aan de linkerkant dat de links: 0%. Om de disc is het centrale punt op de ouders op de linker zijde, gaan we naar links door een radius – –r, dus het verkrijgen van links: calc(0% – var(–r)). Echter, de laatste positie is $m aan de linkerkant van de ouders op de linkerrand:

links: calc(0% – var(–r) – #{$m});

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor de derde <article> (de eerste op de laatste rij), we hebben dezelfde waarde voor de verschuiving langs de x-as, zoals in het geval van de eerste.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Verticaal, beginnen we met de disc ‘ s boven grens langs de bovenkant van de ouder—dat is top: 0%. Om de disc is het centrale punt bij de ouders op de bovenkant, we omhoog door een radius – –r, dus aan de top: calc(0% – var(–r)). Maar we willen het $m boven de ouder boven de rand, zodat de uiteindelijke top offset is:

top: calc(0% – var(–r) – #{$m});

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor de laatste (tweede op de laatste rij), we hebben dezelfde horizontale offset als in het geval van de één boven en dezelfde verticale offset als voor de één naar links op dezelfde rij.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Dus, onze offsets kan worden geschreven:

artikel:nth-of-type(1) { /* 1 */
links: calc(100%/* 2*50% = (1 + 1)*50% = (1 + i)*50% */ – var(–r) + /* i=+1 */#{$m});
top: calc(100%/* 2*50% = (1 + 1)*50% = (1 + j)*50% */ – var(–r) + /* j=+1 */#{$m});
}

artikel:nth-of-type(2) { /* 2e */
links: calc( 0%/* 0*50% = (1 – 1)*50% = (1 + i)*50% */ – var(–r) – /* i=-1 */#{$m});
top: calc(100%/* 2*50% = (1 + 1)*50% = (1 + j)*50% */ – var(–r) + /* j=+1 */#{$m});
}

artikel:nth-of-type(3) { /* 3e */
links: calc(100%/* 2*50% = (1 + 1)*50% = (1 + i)*50% */ – var(–r) + /* i=+1 */#{$m});
top: calc( 0%/* 0*50% = (1 – 1)*50% = (1 + j)*50% */ – var(–r) – /* j=-1 */#{$m});
}

artikel:nth-of-type(4) { /* 4e */
links: calc( 0%/* 0*50% = (1 – 1)*50% = (1 + i)*50% */ – var(–r) – /* i=-1 */#{$m});
top: calc( 0%/* 0*50% = (1 – 1)*50% = (1 + j)*50% */ – var(–r) – /* j=-1 */#{$m});
}

Dit betekent dat de posities van de centrale punten van de schijven is afhankelijk van de kloof tussen onze <artikel> elementen (deze afstand is twee keer de marge: $m we op hen), op de schijf met straal r en op een paar horizontale en verticale multipliers (–i –j respectievelijk). Zowel deze multipliers zijn in eerste instantie -1.

Voor de eerste twee <artikel> elementen (op de eerste rij van de 2×2 grid), veranderen we de verticale multiplier –j 1, omdat we willen dat de y-coördinaat van de cd ‘s’ centrale punten worden hieronder de onderkant, terwijl voor de oneven (de eerste kolom), veranderen we de horizontale multiplier –ik aan 1, omdat we willen dat de x-coördinaat te worden aan de rechterkant van het recht rand.

html { –i: -1; –j: -1 } /* multipliers in eerste instantie ingesteld op -1 */

h3, sectie {
en:before {
/* set generieke offsets */
top: calc((1 + var(–j))*50% – var(–r) + var(–j)*#{$m});
links: calc((1 + var(–i))*50% – var(–r) + var(–i)*#{$m});
}
}

@media (min-width: 2*($min-w + 2*$m)) {
artikel {
/* verander verticale multiplier voor de eerste twee (op de 1e rij van 2×2 grid) */
en:nth-of-type(-n + 2) { –j: 1 }

/* verander de horizontale multiplier voor vreemde eenden (op 1e kolom) */
en:nth-of-type(oneven) { –i: 1 }
}

Merk op dat we alleen zichtbaar schijf uitsparingen op de <section> element voor de eerste twee <artikel> – elementen en alleen op de <h3> voor de laatste twee. Dus voor de eerste twee <artikel> elementen, de straal –r op de rubriek ‘ s ::voor pseudo-element is 0, terwijl voor de laatste twee, deze straal is 0 voor de afdeling ::voor pseudo:

@media (min-width: 2*($min-w + 2*$m)) {
artikel {
en:nth-of-type(-n + 2) h3,
en:nth-of-type(n + 3) {en:before { –r: 0 ; } }
}
}

Op een vergelijkbare manier, voegen we een gedifferentieerde stofferingen de kinderen van de <article> elementen:

$p: .5rem;

h3, sectie { padding: $p; }

@media (min-width: 2*($min-w + 2*$m)) {
artikel {
en:nth-of-type(-n + 2) sectie
en:nth-of-type(n + 3) h3 {
padding-right: calc(.5*(1 + var(–i))*(var(–r) – #{$m}) + #{$p});
padding-left: calc(.5*(1 – var(–i))*(var(–r) – #{$m}) + #{$p});
}
}
}

Dit helpt ons om het resultaat zijn we op zoek naar:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

De bovenstaande demo werkt in de huidige versies van alle belangrijke browsers en, als we dat kunnen doen met wat herhaling in plaats van met behulp van CSS variabelen, kunnen we de ondersteuning uitbreiden helemaal terug naar IE9.

Mogelijke problemen met de bovenstaande methode

Hoewel dit een snelle en eenvoudige cross-browser manier om het gewenste resultaat te krijgen in dit specifieke geval, kunnen we niet altijd zo gelukkig zijn met deze aanpak.

Ten eerste, we moeten een pseudo-element voor elk sleepten hoek, dus als we willen dat dit effect voor alle hoeken, we moeten brengen in een extra element. Sad panda.

Ten tweede, kunnen we niet altijd willen een solide achtergrond. We willen een semi-transparante (wordt het een pijn om te krijgen als we willen om meer dan een uitgeholde hoek), een verloop van één (terwijl we kunnen emuleren een aantal radiale verlopen met box-shadow, het is een minder dan ideale oplossing), of zelfs een afbeelding op de achtergrond (nauwelijks goed te doen met de enige oplossing te gebruiken mix-mix-modus die de bezuinigingen uit de Edge ondersteuning zonder een elegante fallback).

En hoe zit het met de echt grote vakken waarvoor de spread we hebben niet genoeg? Ugh.

Dus, laten we eens kijken naar andere, meer betrouwbare benaderingen met verschillende graden van browser support.

Flexibiliteit en een goede steun van de browser? SVG!

Dit is waarschijnlijk geen verrassing, maar de volledige SVG-oplossing tarieven het beste als we iets willen flexibel en betrouwbaar cross-browser vandaag. Het is een oplossing dat gaat met behulp van een SVG element voor de inhoud van ons vak. Dit SVG bevat een <cirkel> op welke we hebben een radius r attribuut.

<div class= “box”>
<svg>
<cirkel r=’50’/>
</svg>
DE INHOUD VAN DE TEKST VAN HET VAK GAAT HIER
</div>

We zijn helemaal positie van dit SVG-binnen het vak en de grootte van het zo dat het volledig betrekking op zijn ouders:

.box { position: relative; }

svg {
position: absolute;
breedte: 100%;
height: 100%;
}

Niets te interessant tot nu toe, dus laten we de <cirkel> een id en klonen in de andere hoeken:

<circle id=’c’ r=’50’/>
<gebruik van xlink:href=’#c’ x=’100%’/>
<gebruik van xlink:href=’#c’ y=’100%’/>
<gebruik van xlink:href=’#c’ x=’100%’ y=’100%’/>

Merk op dat als we willen uitsluiten van een hoek of meer, kunnen we gewoon niet klonen.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Goed, maar wat we hier hebben gedaan is het maken van cirkels in de hoeken en wat we eigenlijk willen is… precies het tegenovergestelde! Wat wij doen is deze cirkels binnen een <masker>, op de top van een witte, full-size (die het hele SVG) rechthoek en dan zijn we gebruiken dit masker op een andere full size rechthoek:

<masker id= ” m ” fill=’#fff’>
<rect id=’r’ width=’100%’ height=’100%’/>
<circle id=’c’ r=’50’ fill=’#000’/>
<gebruik van xlink:href=’#c’ x=’100%’/>
<gebruik van xlink:href=’#c’ y=’100%’/>
<gebruik van xlink:href=’#c’ x=’100%’ y=’100%’/>
</masker>
<gebruik van xlink:href=’#r’ fill=’#f90′ masker=’url(#m)”/>

Het resultaat is hieronder te zien:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Als we de tekst, we moeten ons aanpassen het selectievakje opvulling aan ons om de hoek radius, instellen op dezelfde waarde als we de straal van de SVG-cirkel, met behulp van JavaScript om synchroon te houden:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Natuurlijk, het vullen van onze achtergrond rechthoek hoeft niet te worden een massief te zijn. Het kan goed zijn semi-transparant (zoals in de demo hierboven), of we kunnen gebruik maken van een SVG-verloop of patroon. Het laatste zou ook kunnen wij gebruik maken van één of meerdere achtergrond afbeeldingen.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Maar ik kwam hier voor de CSS-candy!

Nou, blij dat je het vraagt! Er zijn een aantal dingen die we kunnen doen hier op een verschuiving van het gewicht van het te maskeren methode van SVG te CSS.

Helaas, geen van deze is cross-browser, maar ze vereenvoudigen dingen en ze zijn zeker iets om een horloge te houden in de nabije of verre toekomst.

Het gebruik van CSS maskeren van HTML-elementen in de plaats

Wat wij hier doen, is het verwijderen van alles wat buiten het masker van de SVG. Vervolgens, van de CSS, stellen we een achtergrond (die kan worden semi-transparant, een CSS gradient, een afbeelding, een combinatie van meerdere achtergronden… iets dat met CSS te bieden heeft) en het masker woning op .box element:

.box {
/* elke vorm van achtergrond wij wensen */
masker: url(#m);
}

Merk op dat het instellen van een inline SVG-masker op een HTML-element werkt alleen in Firefox voor nu!

Versie met behulp van CSS maskeren direct aan ons .vak (live demo, alleen Firefox).

Instellen van de cirkel van het CSS

Dit betekent het verwijderen van de r-attribuut van de <cirkel> en in de CSS naar dezelfde variabele als de doos padding:

.box { padding: var(–r); }

[id=’c’] { r: var(–r); }

Op deze manier, als we de waarde van –r, zowel de scoop radius en de bekleding rond het .inhoud van de doos op de hoogte!

Merk op dat het instellen van geometrie-eigenschappen voor SVG elementen uit de CSS werkt alleen in het Knipperen met de browsers van nu!

Versie met behulp van een CSS-variabele voor de <cirkel> radius (live demo, Knipperen).

Het combineren van de twee voorgaande methoden

Hoewel dit zou cool, het is helaas niet mogelijk in de praktijk in elke browser op het moment. Maar het goede nieuws is dat we nog beter doen dan dat!

Het gebruik van CSS gradients voor het maskeren

Let op dat de CSS maskeren op HTML-elementen doet het al helemaal niet in de Rand op dit punt, maar het is weergegeven als “In Ontwikkeling” en een vlag voor het (dat doet niets voor nu) heeft al aangetoond in over:vlaggen.

We dumpen van de SVG-deel volledig en beginnen met het bouwen van onze CSS gradient masker. We maken de cirkels in de hoeken met behulp van de radiale verlopen. De volgende CSS-creëert een cirkel van straal –r links boven in de hoek van een doos:

.box {
achtergrond: radiaal verloop(cirkel 0 0, #000 var(–r, 50px), transparant, 0);
}

Het kan zijn live te zien in de demo hieronder, waar we ook het vak van een rode contour is gewoon zo dat we kunnen zien zijn grenzen:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Wij maken gebruik van exact dezelfde gradiënt voor ons masker:

.box {
/* hetzelfde als voorheen */
/* CSS achtergrond wij wensen */
masker: radiaal verloop(cirkel 0 0, #000 var(–r, 50px), transparant, 0);
}

Merk op dat WebKit browsers moeten nog steeds de -webkit prefix voor het masker eigenschappen.

Wij voeg vervolgens de cirkels op de andere hoeken:

$grad-lijst: radiaal verloop(cirkel 0 0 , #000 var(–r, 50px), transparant, 0),
radiaal verloop(cirkel op 100% 0 , #000 var(–r, 50px), transparant, 0),
radiaal verloop(cirkel op 0 100%, #000 var(–r, 50px), transparant, 0),
radiaal verloop(cirkel op 100% 100%, #000 var(–r, 50px), transparant, 0);
.box {
/* hetzelfde als voorheen */
/* CSS achtergrond wij wensen */
masker: $grad-lijst
}

Dat is waanzinnig repetitieve, een stuk van het schrijven of een stuk van kopiëren-plakken, dus laten we eens kijken wat we daaraan kunnen doen.

Ten eerste, we maken gebruik van een CSS-variabele voor de stop-lijst. Dit voorkomt herhaling in de gegenereerde CSS.

$grad-lijst: radiaal verloop(cirkel 0 0 , var(–stop-lijst)),
radiaal verloop(cirkel op 100% 0 , var(–stop-lijst)),
radiaal verloop(cirkel op 0 100%, var(–stop-lijst)),
radiaal verloop(cirkel op 100% 100% var(–stop-lijst));

.box {
/* hetzelfde als voorheen */
/* CSS achtergrond wij wensen */
–stop-lijst: #000 var(–r, 50px), transparante 0;
masker: $grad-lijst;
}

Maar het is nog steeds niet veel beter, dus laten we het genereren van de hoeken in een lus:

$grad-lijst: ();

@$i van 0 tot en met 4 {
$grad-lijst: $grad-lijst,
radiaal verloop(cirkel ($i%2)*100% floor($i/2)*100%, var(–stop-lijst));
}

.box {
/* hetzelfde als voorheen */
/* CSS achtergrond wij wensen */
–stop-lijst: #000 var(–r, 50px), transparante 0;
masker: $grad-lijst;
}

Veel beter zo ver als de code komt omdat we nu niet hebben om iets te schrijven meerdere keren en lopen het risico van het niet overal hoger. Maar het resultaat tot nu toe is niet wat wij zouden gaan voor:

Resultaat van de bovenstaande code (live demo, geen Edge support voor nu).

Hier hebben we het uitsnijden van alles, maar de hoeken, wat is het tegenovergestelde van wat we willen.

Een ding dat we kunnen doen is het omgekeerde het verlopen, maken de hoek kringen transparant en de rest zwart met:

–stop-lijst: transparant var(–r, 50px), #000 0;

Dit doet de truc wanneer wij maken gebruik van slechts één overgang voor slechts één hoek:

Resultaat bij het gebruik van slechts één van de gradiënt (live demo, geen Edge support voor nu).

Echter, wanneer we stapelen ze alle vier (of zelfs twee), krijgen we een zwart rechthoek met de grootte van ons vak voor het masker, dat betekent niets daadwerkelijk wordt gemaskeerd meer.

Lagen-masker verlopen (live demo, geen Edge support voor nu).

Zo beperken we elk van deze gradiënten een kwart van onze vak – 50% van de breedte en 50% van de hoogte, waardoor het krijgen van 25% (een kwart) van het gebied voor elke:

Ons masker, verdeeld in vier kwartalen (live).

Dit betekent dat we het ook nodig zijn om een masker-grootte van 50% van 50%, een masker-repeat no-repeat, en de positie van elk masker-de afbeelding in de gewenste hoek:

$grad-lijst: ();

@$i van 0 tot en met 4 {
$x: ($i%2)*100%;
$y: floor($i/2)*100%;
$grad-lijst: $grad-lijst
radiaal verloop(cirkel ($x, $y, var(–stop-lijst)) /* masker */
$x $y; /* masker positie */
}

.box {
/* hetzelfde als voorheen */
/* CSS achtergrond wij wensen */
–stop-lijst: transparant var(–r, 50px), #000 0;
masker: $grad-lijst;
masker-size: 50% 50%;
masker-repeat: no-repeat;
}

Merk op dat WebKit browsers moeten nog steeds de -webkit – voorvoegsel voor masker eigenschappen.

Maar het grote probleem hier is… het probleem met de verkaveling en afronding in het algemeen—onze vier kwartalen samen niet altijd in slagen om make-up een geheel weer, dus we eindigen met hiaten tussen hen in.

Helaas, we kunnen nog hiaten tussen de vier kwartalen (live demo).

Ach, het is niet zo dat we niet kunnen dekken die gaten met dunne linear-gradient() stroken of het verhogen van het masker tot laten we zeggen dat 51%:

Het verhogen van de masker-formaat voor elke verloop laag lost het probleem van de verschillen (live demo).

Maar is er niet een meer elegante manier?

Goed, er is een masker-composiet eigenschap die kan ons helpen als we het elkaar snijden bij het terugkeren naar de volledige grootte van de gradiënt lagen.

$grad-lijst: ();

@$i van 0 tot en met 4 {
$grad-lijst: $grad-lijst,
radiaal verloop(cirkel ($i%2)*100% floor($i/2)*100%, var(–stop-lijst));
}

.box {
/* hetzelfde als voorheen */
/* CSS achtergrond wij wensen */
–stop-lijst: transparant var(–r, 50px), #000 0;
masker: $grad-lijst;
masker-composiet: uitsluiten;
}

Dit is erg cool, want het is een pure CSS, geen SVG-oplossing, maar de niet-zo-goede nieuws is dat de steun is beperkt tot de Firefox 53+ hier.

Resultaat met behulp van masker-composiet: intersect (live demo).

Echter, het is nog altijd beter dan de steun voor de laatste optie die we hebben als het gaat om schepte hoeken.

De hoek-vorm optie

Lea Verou kwam met dit idee zo ‘ n vijf jaar geleden en zelfs een voorbeeld pagina. Helaas, het is niet alleen niet geïmplementeerd door elke browser, maar de spec nog niet geavanceerd veel in de tussentijd. Het is nog steeds iets om in gedachten te houden voor de toekomst, want het biedt veel flexibiliteit met weinig code – herscheppen van onze werking zou alleen het volgende nodig:

padding: var(–r);
hoek-vorm: scoop;
border-radius: var(–r);

Geen markup braaksel, geen lange gradiënt lijsten bekijken, dit is een heel simpel stukje CSS. Dat is… wanneer wordt het eindelijk ondersteund door browsers!