Scooped Ecken in 2018

0
58

Als ich sah, dass Chris’ Artikel über notched-Boxen, erinnerte ich mich daran, dass ich eine Herausforderung vor einer Weile in CSS ein design wie die, die unten in eine cross-browser-Art und Weise:

Was die Herausforderung aussah.

Es sieht ziemlich ähnlich wie das Konzept der notched-Boxen, außer die Ecken sind jetzt geschöpft und wir haben nur zu befürchten, eine Ecke pro box. Also lasst uns sehen, wie können wir es tun, wie wir können, erweitern Sie die Technik, um mehrere Ecken, welche Probleme haben wir und wie können wir umgehen mit oder ohne browser-Unterstützung Kompromisse.

Die Idee: box-shadow!

Wir beginnen mit einem box-element:

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

Wir geben einige dieser Dimensionen oder die Dimensionen entschieden werden durch den Inhalt—es ist nicht wirklich wichtig. Aus Gründen der Einfachheit, wir sind nur die Einstellung max-width und min-height. Wir sind auch geben Sie eine Gliederung damit wir sehen können, seine Grenzen.

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

Als Nächstes haben wir absolut position ein Quadrat ::before pseudo-element, dessen Kantenlänge ist gleich dem Durchmesser (oder zweimal der radius $r), der die Schaufel in die Ecke. Wir geben auch dieses pseudo-element ein rötlich-box-shadow und eine dummy-hintergrund (das entfernen wir später) nur, damit wir ihn besser zu sehen:

$r: 2em;

.box {
position: relative;
/* gleichen Stile wie zuvor */

&:before {
position: absolute;
Polsterung: $r;
box-shadow: 0 0 7px #b53;
background: #95a;
Inhalt:”
}
}

Und das ist, was wir bisher haben:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Gut, es sieht nicht allzu spannend… noch! Lassen Sie uns also bewegen, und stellen dieses Quadrat eine Scheibe durch setzen border-radius: 50% auf es und gib ihm eine negative margin gleich dem radius $r, so dass sein Mittelpunkt fällt mit dem (0,0) – Punkt (linke Obere Ecke) des übergeordneten box. Wir setzen auch overflow: hidden auf die übergeordnete box, so dass das, was dieses pseudo-element ist außerhalb des .Feld wird ausgeschnitten.

$r: 2em;

.box {
overflow: hidden;
/* gleichen Stile wie zuvor */

&:before {
/* gleichen Stile wie zuvor */
Marge: -$r;
border-radius: 50%
}
}

Nun, wir beginnen zu sehen, die Form, die wir haben richten:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Aber es ist immer noch nicht ganz das, was wir wollen. Um dorthin zu gelangen, benutzen wir die vierte length-Wert für den box-shadow-Eigenschaft: die Ausbreitung radius. Wenn Sie eine Auffrischung benötigen, wie box-shadow arbeitet mit diesen vier Werten können Sie sich die interaktive demo an unter:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Sie haben vielleicht schon erraten, was wir als Nächstes tun. Wir entfernen Sie die dummy-hintergrund, wir null die ersten drei box-shadow Werte (die x-und y-offset und blur-radius) und eine ziemlich große Zahl für die Letzte (der spread radius):

box-shadow: 0 0 0 300px;

Die interaktive demo an, unten zeigt, wie die Erhöhung der spread radius macht es zu vertuschen, mehr und mehr von seinen Eltern .box:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Also, der trick ist hier mit einer Ausbreitung der radius ausreichend groß, so dass es deckt den rest des übergeordneten Elements. Die kühle Sache über dieses ist, dass wir die box-shadow-semi-transparent oder haben abgerundete Ecken auf die Muttergesellschaft .box:

.box {
/* gleichen Stile wie zuvor */
border-radius: 1em;

&:before {
/* gleichen Stile wie zuvor */
box-shadow: 0 0 0 300px rgba(#95a, .75);
}
}

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Natürlich, genauso wie Chris in dem Artikel darauf hingewiesen auf notched-Boxen sind, können wir die scoop radius eine CSS-Variablen und dann einfach ändern, dass aus dem JavaScript. Dann alles updates schön, sogar mit text Inhalt unserer box:

:root { –r: 50px }

.box {
/* gleichen Stile wie zuvor */
Polsterung: var(–r);

&:before {
/* gleichen Stile wie zuvor */
Marge: calc(-1*var(–r));
Polsterung: inherit;
}

Beachten Sie, dass, wenn wir auch text-Inhalte, müssen wir einen negativen z-index für das ::before pseudo-element und explizit position in der Ecke wie wir haben jetzt auch eine Polsterung auf .box-zum Ausgleich für die Schaufel.

.box {
/* gleichen Stile wie zuvor */

&:before {
/* gleichen Stile wie zuvor */
z-index: -1;
top: 0;
Links: 0
}

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Die Anwendung dieser Technik

Jetzt gehen wir weiter und sehen, wie können wir dieses Konzept, um zu reproduzieren das design zeigte ich am Anfang. In diesem speziellen Fall, die zentrale Punkte des pseudo-element DISKS, die nicht übereinstimmen mit den Winkeln der Schachtel, aber außerhalb, in der Mitte des Raumes zwischen den Kisten.

Der Aufbau ist ziemlich einfach, nur ein <header> – element, gefolgt von vier <Artikel> – Elemente habe ich erstellt, Mops-Schleife:

während n–
Artikel
h3 #{data[n].name}
Abschnitt
p #{data[n].quote}
a(href=’#’) gehen

Wir verwenden eine Verpackung flexbox-layout auf dem <body> mit dem <header> – wirklich breit und mit einem oder zwei <Artikel> – Elemente in jeder Zeile, je nachdem, wie breit der viewport ist.

Landschaft (Links) vs. portrait (rechts) Modus.

Wenn wir eine einzelne <article> in jeder Zeile, haben wir nicht geschöpft Ecken, so dass Ihr radius ist 0px. Ansonsten geben wir diese radius-r einen Wert ungleich null.

$min-w: 15rem; /* min-width für ein Artikel-element */
$m: 1rem; /* Rand eines solchen Elements */

html – {–r -: 0px; }

article {
Marge: $m;
min-width: $min-w;
width: 21em;
}

@media (min-width: 2*($min-w + 2*$m) /* reicht für 2 pro Zeile */) {
html – { –r: 4rem; }

article { width: 40%; }
}

Lassen Sie uns nun betrachten nur die situation, wenn wir zwei <Artikel> – Elemente pro Zeile (und natürlich schöpfte die Ecke für jeden, denn das ist es, was für uns von Interesse).

In dem Fall der erste, beginnen wir mit der linken Grenze der disc entlang der rechten Kante des übergeordneten Elements. Links: 100% bisher. Zum verschieben der x-Koordinate der disc zentralen Punkt an den rechten Rand des übergeordneten Elements, subtrahieren wir die Scheibe hat einen radius, das bringt uns zu linken: calc(100% – var (- r)). Aber wir wollen es nicht auf den rechten Rand, wir wollen es nach rechts versetzt durch die <Artikel> margin $m, das bringt uns zu dem letzten Wert:

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

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Entlang der y-Achse, beginnen wir mit der obersten Grenze der disc entlang der unteren Kante des übergeordneten Elements—das ist Spitze: 100%. Um den disc-Mittelpunkt der Unterkante des übergeordneten box, wir bewegen es durch einen radius, das gibt uns top: calc(100% – var (- r)). Schließlich wollen wir in diesem zentralen Punkt werden $m unterhalb der übergeordneten unteren Rand, das gibt uns den endgültigen vertikalen Versatz der:

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

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Für das zweite <Artikel> (zweite in der gleichen Zeile), wir haben den gleichen Wert im Fall der vertikalen Versatz.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Horizontal jedoch, beginnen wir mit der disc linken Grenze entlang seiner Eltern linken Rand—left: 0%. Setzen Sie die disc zentralen Punkt auf seine Eltern linken Rand, wir verschieben es nach Links durch einen radius-r, somit immer left: calc(0% – var (- r)). Jedoch, die endgültige position wird $m auf der linken Seite der Eltern linken Rand:

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

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Für die Dritte <Artikel> (erste in der letzten Zeile), wir haben den gleichen Wert für die Verschiebung entlang der x-Achse, wie im Fall der ersten.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Vertikal, beginnen wir mit der disc die Obere Grenze entlang der oberen Kante des übergeordneten Elements—top: 0%. Setzen Sie die disc zentralen Punkt auf der übergeordneten oberen Kante, ziehen wir es durch einen radius-r, somit immer top: calc(0% – var (- r)). Aber wir wollen es $m oberhalb des Elternteils oberen Rand, so dass der Letzte top-offset:

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

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Für die Letzte (zweite auf die Letzte Zeile), wir haben die gleiche horizontale Verschiebung wie im Falle der oben genannten und die gleiche vertikale offset für den einen zu seiner linken auf der gleichen Zeile.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

So, unsere offsets geschrieben werden kann:

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) { /* 2 */
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) { /* 3 */
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) { /* 4 */
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});
}

Dies bedeutet, dass die Positionen der zentralen Punkte der Scheiben hängt von der Lücke zwischen den <Artikel> – Elemente (diese Lücke ist zweimal die Marge: $m wir setzen auf Sie), auf der Scheibe mit dem radius r und ein paar von horizontalen und vertikalen Multiplikatoren (–i –j beziehungsweise). Diese beiden Multiplikatoren sind zunächst -1.

Für die ersten beiden <Artikel> – Elemente (auf der ersten Zeile in der 2×2 grid), ändern wir die vertikale Multiplikator –j um 1, weil wir wollen, dass die y-Koordinaten der Scheiben ” zentrale Punkte werden unter den unteren Rand, während für die ungeraden (auf die erste Spalte), ändern wir die horizontale Multiplikator –i 1 weil wir wollen, dass die x-Koordinate rechts von der rechten Kante.

html – {–i: -1; –j: -1 } /* Multiplikatoren zunächst auf -1 gesetzt */

h3, Abschnitt {
&:before {
/* generische 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)) {
article {
/ * * * ändern Sie die vertikale Multiplikator für die ersten beiden (1. Reihe 2×2-raster) */
&:nth-of-type (n + 2) { –j: 1 }

/ * * * ändern der horizontalen Multiplikator für die ungeraden (1. Spalte) */
&:nth-of-type(odd) { –i: 1 }
}

Beachten Sie, dass wir nur den sichtbaren disc Ausschnitte über das <section> – element für die ersten beiden <Artikel> – Elemente, und nur auf die <h3> für die letzten beiden. Also für die ersten beiden <Artikel> – Elemente, die radius-r auf die Rubrik ::before pseudo-element ist 0, während für die letzten beiden, der radius ist 0 für die Sektion ::vor pseudo:

@media (min-width: 2*($min-w + 2*$m)) {
article {
&:nth-of-type (n + 2) h3,
&:nth-of-type(n + 3) Abschnitt { &:vor { –r: 0 ; } }
}
}

In ähnlicher Weise, wie wir hinzufügen differenzierte Polster für die Kinder in den <Artikel> – Elemente:

$p: .5rem;

h3, Abschnitt { padding: $p; }

@media (min-width: 2*($min-w + 2*$m)) {
article {
&:nth-of-type (n + 2) Abschnitt
&: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});
}
}
}

Das hilft uns, das Ergebnis, das wir suchen:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Die oben genannten demo funktioniert in aktuellen Versionen aller wichtigen Browser und, wenn wir tun können, mit ein paar Wiederholungen anstelle der Verwendung von CSS-Variablen, verlängern wir unterstützen alle den Weg zurück zu IE9.

Mögliche Probleme mit der oben genannten Methode

Dies war zwar eine schnelle und einfache cross-browser Weg, um das gewünschte Ergebnis zu erhalten, in diesem speziellen Fall, können wir nicht immer so viel Glück mit diesem Ansatz.

Zuerst benötigen wir ein pseudo-element für jede geschöpft Ecke, so dass, wenn wir wollen, dass dieser Effekt für alle Ecken, die wir brauchen, um in einem extra-element. Sad panda.

Zweitens, wir können nicht immer wollen, einen einfarbigen hintergrund. Vielleicht wollen wir eine semi-transparente (das wird ein Schmerz zu bekommen, wenn wir wollen, um mehr als eine abgesenkte Ecke), einen Verlauf (während wir emulieren kann einige radiale Verläufe mit box-shadow, es ist eine weniger als ideale Lösung), oder auch ein Bild im hintergrund (kaum machbar mit die einzige Lösung zu verwenden, mix-blend-mode, die Schnitte aus Edge-Unterstützung ohne eine elegante fallback).

Und wie wäre es mit wirklich großen Kisten, für die die Ausbreitung, die wir gesetzt haben, ist nicht genug? Ugh.

Also, lasst uns erkunden, andere, mehr zuverlässige Ansätze mit verschiedenen Graden der browser-Unterstützung.

Flexibilität und gute browser-Unterstützung? SVG!

Dies ist wahrscheinlich keine überraschung, aber die volle SVG-Lösung Tarife am besten, wenn wir etwas wollen, flexibel und zuverlässig cross-browser heute. Es ist eine Lösung, die umfasst die Verwendung einer SVG-element vor, den Inhalt unserer box. Das SVG enthält ein <Kreis>, auf dem haben wir einen radius r-Attribut.

<div class= “box”>
<svg>
<circle r=’50’/>
</svg>
TEXT-INHALT DER BOX GEHT HIER
</div>

Wir sind absolut position dieses SVG in der box und der Größe ist es so, dass es deckt Ihre Eltern:

.box { position: relative; }

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

Nichts zu interessant, so weit, so laßt uns den <Kreis> eine id und Klon es in den anderen Ecken:

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

Beachten Sie, dass, wenn wir ausschließen wollen, eine Ecke oder mehr, wir haben einfach nicht Klon, die es gibt.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Okay, aber was wir hier getan haben, erstellen Sie Kreise in den Ecken und was wir eigentlich wollen, ist… genau das Gegenteil! Das, was wir als Nächstes tun ist, legen Sie diese Kreise innerhalb eines <mask> auf der Spitze eines weißen, full-size (für das ganze SVG) Rechteck und dann nutzen wir diese Maske auf ein anderes in voller Größe Rechteck:

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

Das Ergebnis kann unten gesehen werden:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Wenn wir den text, müssen wir uns anpassen, die box-Polsterung an der Ecke radius, die Einstellung, die es auf den gleichen Wert wie wir haben den radius der SVG-Kreis, mit Hilfe von JavaScript synchron zu halten:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Natürlich, das füllen unserer hintergrund-Rechteck nicht brauchen, um eine solide ein. Es kann gut sein, semi-transparent (wie in der demo oben), oder wir verwenden eine SVG Farbverlauf oder Muster. Letzteres würde uns auch erlauben, eine oder mehrere hintergrund-Bilder.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Aber ich kam hierher, um CSS-candy!

Gut, daß du fragst! Es gibt eine Reihe von Dingen, die wir hier tun können, um die Verlagerung des Gewichts von der Maskierung Methode von SVG in CSS.

Leider, keiner von diesen ist cross-browser, aber Sie vereinfachen Dinge und Sie sind definitiv etwas, um zu halten eine Uhr, um in der nahen oder ferneren Zukunft.

Verwenden Sie CSS-masking auf HTML-Elemente statt

Was wir hier tun ist, entfernen Sie alles, was außerhalb der Maske von der SVG. Dann, von CSS, erstellen wir einen hintergrund (das sein kann, semi-transparent, CSS Farbverlauf, ein Bild, eine Kombination aus mehrere Hintergründe… alles, was CSS zu bieten hat) und die mask-Eigenschaft auf die .box-element:

.box {
/* jede Art von hintergrund-wir möchten */
Maske: url(#m);
}

Beachten Sie, dass eine inline-SVG-Maske auf ein HTML-element funktioniert nur in Firefox für jetzt!

Version mit CSS Maskierung direkt auf unserer .box (live-demo, nur Firefox).

Stellen Sie den Kreis radius aus der CSS

Dies bedeutet die Aufhebung der r-Attribut von der <Kreis> und in der CSS auf die gleiche variable als box-padding:

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

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

Dieser Weg, wenn wir ändern den Wert von-r, sowohl die Schaufel radius und die Polsterung rund um den .box-Inhalt aktualisiert!

Beachten Sie, dass die Einstellung der geometrie-Eigenschaften für SVG-Elemente über die CSS funktioniert nur im Blink-Browser für jetzt!

Version mit einem CSS-Variablen für die <Kreis> radius (live-demo, Blinkt nur).

Kombinieren Sie die vorherigen zwei Methoden

Während dies wäre cool, es ist leider nicht möglich, in der Praxis in jedem browser im moment. Aber die gute Nachricht ist, wir können es noch besser als das!

Verwenden Sie CSS-Verläufe zur Maskierung

Beachten Sie, dass CSS-masking auf HTML-Elemente funktionieren überhaupt nicht in der Flanke an diesem Punkt, aber es ist gelistet als “In Entwicklung” – und eine fahne für ihn (das tut nichts für jetzt) hat bereits gezeigt, bis in about:flags.

Wir Graben den SVG-Teil komplett und bauen unsere CSS-gradient-Maske. Wir erstellen die Kreise an den Ecken mit radialen Farbverläufen. Die folgenden CSS erstellt einen Kreis mit radius-r in der linken oberen Ecke einer box:

.box {
background: radial-gradient(circle at 0 0, #000 var (- r, 50px), transparent, 0);
}

Es kann gesehen werden, Leben Sie in der demo unten, wo wir uns auch die box eine rote Umrandung, nur damit wir sehen können, seine Grenzen:

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Wir verwenden die exakt gleichen Verlauf für unsere Maske:

.box {
/* das gleiche wie vorher */
/* jeder CSS-hintergrund-wir möchten */
Maske: radial-gradient(circle at 0 0, #000 var (- r, 50px), transparent, 0);
}

Beachten Sie, dass WebKit-Browser benötigen noch das -webkit – Präfix für die Maske Eigenschaften.

Wir fügen Sie dann die Kreise an den anderen Ecken:

$grad-Liste: radial-gradient(circle at 0 0 , #000 var (- r, 50px), transparent, 0),
radial-gradient(circle at 100% 0 , #000 var (- r, 50px), transparent, 0),
radial-gradient(circle at 0 100%, #000 var (- r, 50px), transparent, 0),
radial-gradient(circle at 100% 100%, #000 var (- r, 50px), transparent, 0);
.box {
/* das gleiche wie vorher */
/* jeder CSS-hintergrund-wir möchten */
Maske: $grad-Liste
}

Das ist wahnsinnig repetitiv, entweder viel schreiben oder viel copy & Paste, also lasst uns sehen, was wir dagegen machen können.

First off, wir verwenden eine CSS-Variablen für die stop-Liste. Damit entfällt die Wiederholung in der generierten CSS.

$grad-Liste: radial-gradient(circle at 0 0 , var(–stop-Liste)),
radial-gradient(circle at 100% 0 , var(–stop-Liste)),
radial-gradient(circle at 0 100%, var(–stop-Liste)),
radial-gradient(circle at 100% 100% var(–stop-Liste));

.box {
/* das gleiche wie vorher */
/* jeder CSS-hintergrund-wir möchten */
–stop-Liste: #000 var (- r, 50px), transparent 0;
Maske: $grad-Liste;
}

Aber es ist immer noch nicht viel besser, wir erzeugen die Ecken innerhalb einer Schleife:

$grad-Liste: ();

@for $i von 0 bis 4 {
$grad-Liste: $grad-Liste,
radial-gradient(circle at ($i%2)*100% floor($i/2)*100%, var(–stop-Liste));
}

.box {
/* das gleiche wie vorher */
/* jeder CSS-hintergrund-wir möchten */
–stop-Liste: #000 var (- r, 50px), transparent 0;
Maske: $grad-Liste;
}

Viel besser, so weit wie der code geht, weil wir nun nicht haben, etwas zu schreiben, mehrfach und laufen Gefahr, nicht die Aktualisierung überall später. Aber das Ergebnis bisher ist nicht, was wir waren für:

Ergebnis der code oben (live-demo, kein Edge-Unterstützung für jetzt).

Hier, wir schneiden alles aus, aber die Ecken, das ist das Gegenteil von dem, was wir wollen.

Eine Sache, die wir tun können, ist die Umkehrung der Gradienten, stellen Sie die Ecke, Kreise und transparent, der rest schwarz mit:

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

Dies funktioniert der trick, wenn wir nur einen Gradienten nur für eine Ecke:

Ergebnis bei der Verwendung von nur einem Gradienten (live-demo, kein Edge-Unterstützung für jetzt).

Allerdings, wenn wir uns stapeln sich alle vier (oder auch zwei), bekommen wir ein Schwarzes Rechteck in der Größe der box für die Maske, was bedeutet eigentlich nichts anderes wird ausgeblendet und nicht mehr.

Schichtung Maske Farbverläufe (live-demo, kein Edge-Unterstützung für jetzt).

So, beschränken wir jeden dieser Gradienten zu einem Viertel des box – 50% Breite und 50% Höhe, somit immer 25% (ein Viertel) der Bereich für jeden:

Unsere Maske, aufgeteilt in vier Viertel (live).

Das heißt, wir müssen auch eine Maske-Größe von 50% zu 50%, eine Maske-repeat no-repeat und position für jede Maske-Bild in die gewünschte Ecke:

$grad-Liste: ();

@for $i von 0 bis 4 {
$x: ($i%2)*100%;
$y: floor($i/2)*100%;
$grad-Liste: $grad-Liste
radial-gradient(circle at $x, $y, var(–stop-Liste)) /* Maske-Bild */
$x – $y; /* Maske-position */
}

.box {
/* das gleiche wie vorher */
/* jeder CSS-hintergrund-wir möchten */
–stop-Liste: transparent, var (- r, 50px), #000 0;
Maske: $grad-Liste;
Maske-size: 50% 50%;
mask-repeat: no-repeat;
}

Beachten Sie, dass WebKit-Browser benötigen noch das -webkit – Präfix für die Maske Eigenschaften.

Aber das große problem hier ist,… das problem mit der division und Rundung im Allgemeinen—unsere vier Quartalen zusammen nicht immer zu verwalten, um das ganze wieder, so dass wir am Ende mit Lücken dazwischen.

Leider kann man sich die Lücken zwischen den vier Quartalen (live-demo).

Naja, es ist nicht so, wir können nicht vertuschen, diese Lücken mit den dünnen linear-gradient() von Streifen oder erhöhen Sie den mask-Größe auf sagen wir mal 51%:

Die Erhöhung der Maske-Größe für jeden Gradienten Schicht behebt das problem der Lücken (live-demo).

Aber gibt es nicht eine elegantere Möglichkeit?

Nun, es gibt eine Maske-zusammengesetzte Eigenschaft, die uns helfen können, wenn wir es schneiden, wenn Sie danach wieder auf die volle Größe gradientenschichten.

$grad-Liste: ();

@for $i von 0 bis 4 {
$grad-Liste: $grad-Liste,
radial-gradient(circle at ($i%2)*100% floor($i/2)*100%, var(–stop-Liste));
}

.box {
/* das gleiche wie vorher */
/* jeder CSS-hintergrund-wir möchten */
–stop-Liste: transparent, var (- r, 50px), #000 0;
Maske: $grad-Liste;
Maske-composite: schließen Sie;
}

Das ist extrem cool, weil es ein reines CSS, kein SVG-Lösung, aber auch die nicht-so-gute Nachricht ist, dass die Unterstützung beschränkt sich auf Firefox 53+ hier.

Ergebnis mit Maske-composite: intersect (live-demo).

Allerdings ist es immer noch besser, als support für die Letzte option, die wir haben, wenn es um scooped Ecken.

Die-Ecke-Form option

Lea Verou kam mit dieser Idee, die vor rund fünf Jahren und sogar eine Vorschau-Seite für es. Leider, es ist nicht nur nicht umgesetzt, die von jedem browser noch, aber die Skillung hat sich nicht wesentlich in der Zwischenzeit. Es ist noch etwas zu beachten, für die Zukunft, denn es bietet eine Menge Flexibilität mit sehr wenig code – Neuerstellung unserer Effekt würde nur erfordern die folgenden:

Polsterung: var(–r);
Ecke-Form: Schaufel;
border-radius: var(–r);

Kein markup Erbrechen, keine langen Farbverlauf Listen, einfach dieses sehr einfache CSS. Das ist… wenn es bekommt endlich unterstützt von den Browsern!