Dro inn Hjørnene i 2018

0
40

Når jeg så Chris’ artikkel om hakket bokser, jeg husket at jeg fikk en utfordring for en stund siden til CSS-en utforming som vist nedenfor i en kryss-nettleser måte:

Hva utfordringen så ut som.

Det ser ganske lik begrepet hakket bokser, bortsett fra hjørnene er nå samlet og at vi bare trenger å bekymre deg om det ene hjørnet per boks. Så la oss se hvordan vi kan gjøre det, hvordan vi kan utvide teknikken til flere hjørner, hvilke saker vi kjøre inn og hvordan vi kan få rundt dem, med eller uten å gjøre nettleser støtter kompromisser.

Den opprinnelige ideen: box-shadow!

Vi starter med en boks element:

<div class= “box’></div>

Vi kan gi dette noen dimensjoner eller la sine dimensjoner bli avgjort av innhold—det spiller egentlig ingen rolle. For enkelhets skyld, vi er bare å sette en maks bredde og en min-høyde på det. Vi er også å gi det en oversikt slik at vi kan se dens grenser.

.boksen {
disposisjon: solid 2px;
maks bredde: 15em;
min høyde: 10em;
}

Neste, vi absolutt posisjon et kvadrat ::før pseudo-element som kant lengde er lik diameter (eller to ganger radius $r) av scoop i hjørnet. Vi gir også denne pseudo-element en rødlig box-shadow og en dummy bakgrunn (som vi kommer til å fjerne senere) slik at vi kan se det bedre:

$r: 2em;

.boksen {
position: relative;
/* samme stiler som før */

og:før {
position: absolute;
polstring: $r;
box-shadow: 0 0 7px #b53;
bakgrunn: #95en;
innhold:”
}
}

Og dette er hva vi har så langt:

Se Pennen av thebabydino (@thebabydino) på CodePen.

Vel, det ser ikke så spennende… ennå! Så la oss gå videre og gjøre denne plassen en plate ved å sette border-radius: 50% på det og gi det en negativ margin lik radius $r, slik at den sentrale punkt faller sammen med (0,0) punkt (øverst i venstre hjørne) av sine foreldre-boksen. Vi har også sett overflow: hidden på den overordnede boksen, slik at det av denne pseudo-element er utenfor .boks blir kuttet ut.

$r: 2em;

.boksen {
overflow: hidden;
/* samme stiler som før */

og:før {
/* samme stiler som før */
marg: -$r;
border-radius: 50%
}
}

Nå vi begynner å se den formen vi har vært på jakt etter:

Se Pennen av thebabydino (@thebabydino) på CodePen.

Men det er fortsatt ikke helt hva vi ønsker. For å få det, bruker vi den fjerde lengde verdi for box-shadow eiendom: spredt radius. Hvis du trenger en oppfriskning på hvordan box-shadow arbeider med disse fire verdiene, kan du sjekke ut interaktiv demo nedenfor:

Se Pennen av thebabydino (@thebabydino) på CodePen.

Du har kanskje allerede gjettet hva vi gjør videre. Vi fjerner dummy bakgrunn, vi null de tre første box-shadow-verdier (x-og y-forskyvning og uskarphet som radius) og bruk et ganske stort tall for det siste (spredning radius):

box-shadow: 0 0 0 300px;

Interaktiv demo nedenfor viser hvordan øke spredningen radius gjør det dekke opp mer og mer av sine foreldre .boksen:

Se Pennen av thebabydino (@thebabydino) på CodePen.

Så trikset her er å ha en spredt radius som er tilstrekkelig stor, slik at det dekker resten av den overordnede element. Den kule ting om dette er at vi kan gjøre box-shadow semi-transparent eller har avrundede hjørner på foreldrene .boksen:

.boksen {
/* samme stiler som før */
border-radius: 1em;

og:før {
/* samme stiler som før */
box-shadow: 0 0 0 300px rgba(#95en, .75);
}
}

Se Pennen av thebabydino (@thebabydino) på CodePen.

Selvfølgelig, akkurat som Chris påpekt i artikkelen på hakket bokser, kan vi få scoop radius et CSS-variabel og så enkelt at endre fra JavaScript. Så alt oppdateringer pent, selv med tekst-innhold i boksen:

:root { –r: 50px }

.boksen {
/* samme stiler som før */
polstring: var(–r);

og:før {
/* samme stiler som før */
margin: calc(-1*var(–r));
polstring: arve;
}

Merk at når vi også har tekst-innhold, vi trenger å sette en negativ z-index på ::før pseudo-element og eksplisitt plassere den i hjørnet som vi nå også har en padding på .boksen for å kompensere for den scoop.

.boksen {
/* samme stiler som før */

og:før {
/* samme stiler som før */
z-index: -1;
øverst: 0;
venstre: 0
}

Se Pennen av thebabydino (@thebabydino) på CodePen.

Å bruke denne teknikken

Nå, la oss gå videre og se hvordan vi kan bruke dette begrepet for å reprodusere design jeg viste i begynnelsen. I dette tilfellet, det sentrale poeng av pseudo-element plater som ikke sammenfaller med boksen hjørner, men er utenfor, i midten av plassen i mellom boksene.

Strukturen som brukes er ganske grei, bare et <header> – element etterfulgt av fire <artikkel> – elementer jeg har generert i en Pug-løkke:

mens n–
artikkel
h3 #{data[n].name}
seksjon
s #{data[n].sitat}
en(href=’#’) gå

Vi bruker en pakke flexbox layout på <body> <header> virkelig bredt og med en eller to <artikkel> – elementer på hver rad, avhengig av hvor stort vinduet er.

Landskapet (venstre) vs portrett (høyre) – modus.

Hvis vi har en enkelt <artikkel> på hver rad, trenger vi ikke har snappet opp hjørnene, slik at deres radius er 0px. Hvis ikke, gir vi denne radius –r en ikke-null-verdi.

$min-w: 15rem; /* min bredden av en artikkel element */
$m: 1rem; /* margin av et slikt element */

html { –r: 0px; }

artikkelen {
margin: $m;
min. bredde: $min-w;
bredde: 21em;
}

@media (min-width: 2*($min-w + 2*$m) /* nok 2 per rad */) {
html { –r: 4rem; }

artikkelen { bredde: 40%; }
}

La oss nå bare vurdere situasjonen når vi har to <artikkel> – elementer per rad (og selvfølgelig en samlet hjørne for hver fordi det er hva som er av interesse for oss).

I tilfelle av den første, starter vi med den venstre grense av platen langs høyre kant av sine foreldre. Det er venstre: 100% så langt. Å flytte x-koordinaten av platen er det sentrale punktet på høyre kant av sine foreldre, kan vi trekke platen er radius, noe som bringer oss til venstre: calc(100% – var(–r)). Men vi ønsker ikke at det på høyre kant, vi vil ha det offset til høyre av <artikkel> margin $m, noe som bringer oss til den endelige verdien:

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

Se Pennen av thebabydino (@thebabydino) på CodePen.

Langs y-aksen, starter vi med den øverste grensen av platen langs den nedre kanten av sine foreldre—som er toppen: 100%. Å sette inn platen er sentrale punkt på den nedre kanten av den overordnede boksen, vi flytter det opp med en radius, noe som gir oss topp: calc(100% – var(–r)). Til slutt ønsker vi dette sentrale punktet for å være $m under foreldrenes nederste kant, som gir oss den endelige vertikal forskyvning av:

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

Se Pennen av thebabydino (@thebabydino) på CodePen.

For det andre <artikkel> (andre på samme rad), vi har den samme verdien i tilfelle av vertikal forskyvning.

Se Pennen av thebabydino (@thebabydino) på CodePen.

Horisontalt vi imidlertid starte med platen til venstre grense være sammen sine foreldres venstre kant—det er venstre: 0%. Å sette inn platen er sentrale punkt på den overordnede venstre kant, vi flytte den venstre ved en radius –r, og dermed få venstre: calc(0% – var(–r)). Men den endelige plasseringen er $m til venstre for foreldrenes venstre kant:

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

Se Pennen av thebabydino (@thebabydino) på CodePen.

For det tredje <artikkel> (først på siste rad), vi har den samme verdi for forskyvning langs x-aksen som i tilfellet med det første.

Se Pennen av thebabydino (@thebabydino) på CodePen.

Vertikalt, starter vi med platens øvre grense langs den øverste kanten av sine foreldre—som er top: 0%. Å sette inn platen er sentrale punktet på foreldrenes øverste kanten, vi flytter det opp med en radius –r, og dermed får topp: calc(0% – var(–r)). Men ønsker vi å ha det $m over foreldrenes øvre kant, slik at den endelige toppen offset er:

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

Se Pennen av thebabydino (@thebabydino) på CodePen.

For det siste (nest siste rad), har vi den samme horisontal forskyvning som i tilfellet med den ene over den og den samme vertikale forskyvningen som for en til venstre på samme rad.

Se Pennen av thebabydino (@thebabydino) på CodePen.

Så, våre kvoter kan skrives:

artikkel:nth-of-type(1) { /* 1. */
venstre: calc(100%/* 2*50% = (1 + 1)*50% = (1 + i)*50% */ – sti(–r) + /* i=+1 */#{$m});
øverst: calc(100%/* 2*50% = (1 + 1)*50% = (1 + j)*50% */ – sti(–r) + /* j=+1 */#{$m});
}

artikkel:nth-of-type(2) { /* 2. */
venstre: calc( 0%/* 0*50% = (1 – 1)*50% = (1 + i)*50% */ – sti(–r) – /* i=-1 */#{$m});
øverst: calc(100%/* 2*50% = (1 + 1)*50% = (1 + j)*50% */ – sti(–r) + /* j=+1 */#{$m});
}

artikkel:nth-of-type(3) { /* 3 */
venstre: calc(100%/* 2*50% = (1 + 1)*50% = (1 + i)*50% */ – sti(–r) + /* i=+1 */#{$m});
øverst: calc( 0%/* 0*50% = (1 – 1)*50% = (1 + j)*50% */ – sti(–r) – /* j=-1 */#{$m});
}

artikkel:nth-of-type(4) { /* 4. */
venstre: calc( 0%/* 0*50% = (1 – 1)*50% = (1 + i)*50% */ – sti(–r) – /* i=-1 */#{$m});
øverst: calc( 0%/* 0*50% = (1 – 1)*50% = (1 + j)*50% */ – sti(–r) – /* j=-1 */#{$m});
}

Dette betyr at plasseringen av det sentrale poeng av platene avhenger av gapet mellom vårt <artikkel> – elementer (dette gapet er dobbelt marg: $m vi satt på dem), på platen radius r og på et par av horisontal og vertikal multiplikatorer (–og –j henholdsvis). Begge disse forsterkerne er i utgangspunktet -1.

For de to første <artikkel> – elementer (på første rad i 2×2-nett), endrer vi den vertikale multiplikator –j til 1 fordi vi vil at y-koordinaten for plater’ sentrale poeng for å være under den nederste kanten, mens for odd ones (første kolonne), endrer vi den horisontale multiplikator –jeg til 1 fordi vi ønsker at x-koordinaten til å være til høyre av høyre kant.

html { –i: -1; –j: -1 } /* multiplikatorer i utgangspunktet satt til -1 */

h3, section {
og:før {
/* sett generisk kvoter */
øverst: calc((1 + var(–j))*50% – var(–r) + var(–j)*#{$m});
venstre: calc((1 + var (–))*50% – var(–r) + var (–)*#{$m});
}
}

@media (min-width: 2*($min-w + 2*$m)) {
artikkelen {
/* endre vertikal multiplikator for to første (på 1. rad av 2×2 rutenett) */
og:nth-of-type(-n + 2) { –j: 1 }

/* endre horisontal multiplikator for odd ones (1. kolonne) */
og:nth-of-type(odd) { –jeg: 1 }
}

Merk at vi bare har synlig plate utsparingene på <section> – elementet for de to første <artikkel> – elementer, og bare på <h3> for de to siste. Så for de to første <artikkel> – elementer, radius –r på overskriften er ::før pseudo-element er 0, mens for de to siste, dette radius er 0 for den del ::før pseudo:

@media (min-width: 2*($min-w + 2*$m)) {
artikkelen {
og:nth-of-type(-n + 2) h3,
og:nth-of-type(n + 3) § { &:før { –r: 0 ; } }
}
}

På en lignende måte, og vi legger til differensiert polstring til barn <artikkel> – elementer:

$p: .5rem;

h3, section { padding: $p; }

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

Dette hjelper oss å få det resultatet vi er ute etter:

Se Pennen av thebabydino (@thebabydino) på CodePen.

Ovenfor demo fungerer i nåværende versjoner av alle de store nettleserne, og hvis vi kan gjøre med litt repetisjon i stedet for ved hjelp av CSS variabler, kan vi utvide støtte hele veien tilbake til IE9.

Potensielle problemer med metoden ovenfor

Mens dette var en rask og enkel kryss-nettleser måte å få det ønskede resultatet i dette tilfellet, kan vi ikke alltid være så heldig med denne tilnærmingen.

First off, vi trenger en pseudo-element for hver øses hjørnet, så hvis vi ønsker at dette gjelder for alle hjørner, må vi ta i et ekstra element. Trist panda.

For det andre, kan vi ikke alltid vil ha en solid bakgrunn. Vi ønsker en semi-transparent (som blir en smerte for å få hvis vi ønsker å ha mer enn én samlet hjørne), en gradient (mens vi kan etterligne noen radial graderinger med box-shadow, det er mindre enn ideell løsning) eller til og med et bilde som bakgrunn (neppe gjennomførbart med den eneste løsningen blir å bruke mix-blanding-modus som kutter ut Edge-støtte uten en elegant fallback).

Og hva med virkelig store bokser som er spredt vi har sett er ikke nok? Ugh.

Så, la oss se på andre, mer pålitelig tilnærminger med ulike grader av nettleseren støtte.

Fleksibilitet og god nettleser støtte? SVG det!

Dette er vel ingen overraskelse, men full SVG-løsning billettpriser best hvis vi ønsker noe fleksibel og pålitelig kryss-nettleser i dag. Det er en løsning som innebærer bruk av en SVG-element før innholdet av boksen. Denne SVG inneholder en <sirkel> som vi har sett en radius r attributt.

<div class= “box’>
<svg>
<sirkel r=’50’/>
</svg>
TEKST INNHOLD AV BOKSEN GÅR HER
</div>

Vi absolutt posisjon denne SVG i boksen og størrelse er det slik at den fullt ut dekker sine foreldre:

.boksen { position: relative; }

svg {
position: absolute;
bredde: 100%;
høyde: 100%;
}

Ingenting så interessant så langt, så la oss gi <sirkel> en id og klone det i andre hjørner:

<sirkel id=’c’ r=’50’/>
<bruk xlink:href=’#c’ x=’100%’/>
<bruk xlink:href=’#c’ y=’100%’/>
<bruk xlink:href=’#c’ x=’100%’ y=’100%’/>

Merk at hvis vi ønsker å ekskludere et hjørne eller mer, vi har bare ikke klone det der.

Se Pennen av thebabydino (@thebabydino) på CodePen.

Ok, men hva vi har gjort her, er å opprette sirkler i hjørnene og hva vi egentlig ønsker er… det motsatte! Hva vi gjør neste er å sette disse kretser innenfor en <maske>, på toppen av en hvit, full-størrelse (som dekker hele SVG) rektangel og så bruker vi denne masken på en annen full størrelse rektangelet:

<maske id=’m’ fylle=’#fff’>
<rect id=’r’ width=’100%’ height=’100%’/>
<sirkel id=’c’ r=’50’ fylle=’#000’/>
<bruk xlink:href=’#c’ x=’100%’/>
<bruk xlink:href=’#c’ y=’100%’/>
<bruk xlink:href=’#c’ x=’100%’ y=’100%’/>
</mask>
<bruk xlink:href=’#r’ fylle=’#f90 ” maske=’url(#m)’/>

Resultatet kan sees nedenfor:

Se Pennen av thebabydino (@thebabydino) på CodePen.

Hvis vi har en tekst, må vi tilpasse boksen polstring til vår hjørne radius, sette det til samme verdi som vi har sett radius av SVG sirkel, ved hjelp av JavaScript for å holde dem synkronisert:

Se Pennen av thebabydino (@thebabydino) på CodePen.

Selvfølgelig, fyll av vår bakgrunn rektangel trenger ikke å være en solid ett. Det kan godt være semi-transparent (som det er i demo ovenfor), eller vi kan bruke en SVG-gradient eller mønster for det. Sistnevnte vil også tillate oss å bruke en eller flere bakgrunnsbilder.

Se Pennen av thebabydino (@thebabydino) på CodePen.

Men jeg kom her for CSS-candy!

Vel, glad du spurte! Det er en rekke ting vi kan gjøre her for å forskyve vekten av maskering metode fra SVG til CSS.

Dessverre, ingen av disse er kryss-nettleser, men de forenkle ting, og de er definitivt noe å holde en klokke for i nær eller fjernere fremtid.

Bruk CSS maskering på HTML-elementer i stedet

Hva vi gjør her, er å fjerne alt utenfor masken fra SVG. Deretter, fra CSS, kan vi angi en bakgrunn (som kan være semi-transparent, en CSS-gradient, et bilde, en kombinasjon av flere bakgrunner… noe som CSS har å tilby), og masken eiendom på .boksen element:

.boksen {
/* noen slags bakgrunn vi ønsker */
maske: url(#m);
}

Vær oppmerksom på at innstillingen en innebygd SVG-maske på et HTML-element fungerer bare i Firefox for nå!

Versjon ved hjelp av CSS maskering direkte på våre .boks (live demo, Firefox).

Angi sirkel med radius fra CSS

Dette betyr å fjerne r attributt fra vår <sirkel>, og sette det i CSS til den samme variabelen som boksen padding:

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

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

På denne måten, når vi endrer verdien av –r, både scoop radius og polstring rundt .boks innhold få oppdatert!

Vær oppmerksom på at innstillingen for geometriske egenskaper for SVG-elementer fra CSS fungerer bare i Blink nettlesere for nå!

Versjon ved hjelp av CSS variabel <sirkel> radius (live demo, Blinker).

Kombinere de to foregående metodene

Selv om dette ville være kult, det er dessverre ikke mulig i praksis i hvilken som helst nettleser i øyeblikket. Men den gode nyheten er at vi kan gjøre det enda bedre enn det!

Bruk CSS graderinger for maskering

Merk at CSS-maskering på HTML-elementer ikke fungerer i det hele tatt i Kant på dette punktet, men det er listet som “under Utvikling” og et flagg for det (det gjør ikke noe, for nå) har allerede vist i om:flagg.

Vi droppe SVG del helt og begynne å bygge vår CSS-gradient maske. Vi opprette sirkler i hjørner med radial graderinger. Følgende CSS skaper en sirkel med radius –r i øvre venstre hjørne av boksen:

.boksen {
bakgrunn: radial-gradient(sirkel på 0 for 0, #000 var(–r, 50px), transparent 0);
}

Det kan sees live i demoen nedenfor, hvor vi har også gitt boksen et rødt omriss slik at vi kan se dens grenser:

Se Pennen av thebabydino (@thebabydino) på CodePen.

Vi bruker nøyaktig samme gradient for våre mask:

.boksen {
/* samme som før */
/* CSS bakgrunn vi ønsker */
maske: radial-gradient(sirkel på 0 for 0, #000 var(–r, 50px), transparent 0);
}

Vær oppmerksom på at WebKit nettlesere trenger fortsatt -webkit – prefiks for masken egenskaper.

Vi legg deretter til sirkler på den andre hjørner:

$grad-liste: radial-gradient(sirkel på 0 for 0 , #000 var(–r, 50px), transparent 0),
radial-gradient(sirkel på 100% 0 , #000 var(–r, 50px), transparent 0),
radial-gradient(sirkel på 0 100%, #000 var(–r, 50px), transparent 0),
radial-gradient(sirkel på 100% 100%, #000 var(–r, 50px), transparent 0);
.boksen {
/* samme som før */
/* CSS bakgrunn vi ønsker */
maske: $grad-liste
}

Det er sinnsykt repeterende, enten mye av å skrive eller mye klipp-og-lim, så la oss se hva vi kan gjøre med det.

First off, kan vi bruke en CSS-variabel for stopp-listen. Dette eliminerer repetisjon i den genererte CSS.

$grad-liste: radial-gradient(sirkel på 0 0 , var(–stop-liste)),
radial-gradient(sirkel på 100% 0 , var(–stop-liste)),
radial-gradient(sirkel på 0 100%, var(–stop-liste)),
radial-gradient(sirkel på 100% 100%, var(–stop-liste));

.boksen {
/* samme som før */
/* CSS bakgrunn vi ønsker */
–stop-liste: #000 var(–r, 50px), transparent 0;
maske: $grad-liste;
}

Men det er fortsatt ikke mye bedre, så la oss generere hjørnene i en løkke som:

$grad-liste: ();

@for $jeg fra 0 til 4 {
$grad-liste: $grad-listen,
radial-gradient(sirkel ($i%2)*100% gulv($i/2)*100%, var(–stop-liste));
}

.boksen {
/* samme som før */
/* CSS bakgrunn vi ønsker */
–stop-liste: #000 var(–r, 50px), transparent 0;
maske: $grad-liste;
}

Mye bedre så langt som koden går fordi vi nå ikke trenger å skrive noe flere ganger, og risikerer ikke å oppdatere overalt senere. Men resultatet så langt er ikke hva vi gikk til:

Resultatet av koden ovenfor (live demo, ingen Edge-støtte for nå).

Her er vi kutte ut alt, men hjørnene, noe som er det motsatte av hva vi ønsker.

En ting vi kan gjøre er å reversere graderinger, gjøre hjørnet sirkler gjennomsiktig og resten svart med:

–stop-liste: transparent var(–r, 50px), #000 0;

Dette gjør susen når vi bruker bare en gradient for bare det ene hjørnet:

Resultat når du bruker bare en gradient (live demo, ingen Edge-støtte for nå).

Imidlertid, når vi ser opp på alle fire av dem (eller bare med to), får vi et svart rektangel størrelsen på boksen for masken, som betyr ingenting faktisk blir maskert ut lenger.

Lagdeling maske graderinger (live demo, ingen Edge-støtte for nå).

Så, vi begrense hver av disse bakkene til en fjerdedel av våre boksen – 50% av bredde og 50% av høyden, og dermed få 25% (en fjerdedel) av området for hver:

Våre maske, delt inn i fire kvartalene (live).

Dette betyr at vi også må angi en maske-størrelse på 50% 50%, en maske-gjenta no-repeat, og posisjon hver maske-bilde i ønsket hjørnet:

$grad-liste: ();

@for $jeg fra 0 til 4 {
$x: ($i%2)*100%;
$y: gulv($i/2)*100%;
$grad-liste: $grad-liste
radial-gradient(sirkel på $x $y, var(–stop-liste)) /* maske bilde */
$x $y; /* maske posisjon */
}

.boksen {
/* samme som før */
/* CSS bakgrunn vi ønsker */
–stop-liste: transparent var(–r, 50px), #000 0;
maske: $grad-liste;
maske-størrelse: 50% 50%;
maske-repeat: no-repeat;
}

Vær oppmerksom på at WebKit nettlesere trenger fortsatt -webkit – prefiks for maske egenskaper.

Men det store problemet her er… problemet med divisjon og avrunding generelt—våre fire kvartalene sette sammen ikke alltid klarer å gjøre opp en hel igjen, så vi ender opp med hull i mellom dem.

Dessverre, kan vi få hull i mellom de fire kvartalene (live demo).

Oh well, det er ikke sånn at vi kan ikke dekke opp de hullene med tynne linear-gradient() strimler eller øke en maske-størrelse til å la oss si at 51%:

Øker en maske-størrelse for hver gradient lag løser problemet med hull (live demo).

Men er det ikke en mer elegant måte?

Vel, det er en maske-kompositt eiendom som kan hjelpe oss hvis vi setter det til å møtes ved å gå tilbake til full størrelse gradient lag.

$grad-liste: ();

@for $jeg fra 0 til 4 {
$grad-liste: $grad-listen,
radial-gradient(sirkel ($i%2)*100% gulv($i/2)*100%, var(–stop-liste));
}

.boksen {
/* samme som før */
/* CSS bakgrunn vi ønsker */
–stop-liste: transparent var(–r, 50px), #000 0;
maske: $grad-liste;
maske-kompositt: ekskludere;
}

Dette er ekstremt kult fordi det er en ren CSS, ingen SVG-løsning, men den ikke-så-gode nyheten er at støtten er begrenset til Firefox 53+ her.

Resultat ved hjelp av mask-kompositt: intersect (live demo).

Men det er likevel bedre enn støtte for det siste alternativet vi har når det kommer til snappet opp hjørnene.

Hjørnet-form alternativ

Lea Verou kom opp med denne ideen for noen år siden og selv laget en forhåndsvisning av siden for det. Dessverre, det er ikke bare det ikke er implementert ved en hvilken som helst nettleser ennå, men spec ikke har avansert så mye i mellomtiden. Det er fortsatt noe å huske på for fremtiden, da det tilbyr en stor fleksibilitet med svært lite kode – å gjenskape vår effekten ville bare krever følgende:

polstring: var(–r);
hjørne-form: scoop;
border-radius: var(–r);

Ingen markup spy, ingen lang gradient lister, bare dette veldig enkelt del av CSS. Det er… når det til slutt blir støttet av nettlesere!