Notched-Boxen

0
74

Sagen Sie versuchen zu ziehen aus einem design-Effekt, bei dem die Ecke eines Elements abgeschnitten. Vielleicht sind Sie ein Battlestar Galactica fan? Oder vielleicht wollen Sie nur die außergewöhnliche Wirkung von es, da es vermeidet, die aussah wie eine typische Rechteck.

Ich vermute, es gibt viele Möglichkeiten, es zu tun. Sie können sicherlich mehrere Hintergründe zum platzieren von Bildern in den Ecken. Sie könnte genauso gut verwenden Sie eine flexible SVG-Form in den hintergrund. Ich Wette, es gibt auch eine exotische Art der Verwendung von Gradienten, um es auszuziehen.

Aber, ich mag die Idee, einfach eine Schere und kappten die dang Ecken. Wir im wesentlichen tun können, nur, dass sich Dank der clip-Pfad. Wir können mithilfe der polygon () – Funktion, bereitstellen einer Liste von X-und Y-Koordinaten und clip entfernt, was außerhalb von Ihnen.

Überprüfen Sie heraus, was passiert, wenn wir die Liste drei Punkte: Mitte oben, rechts unten, Links unten.

.Modul {
clip-path:
polygon(
50% 0,
100% 100%,
0 100%
);
}

Nicht nur drei Punkte, lassen Sie die Liste alle acht Punkte für die gekerbten Ecken. Könnten wir verwenden Pixel, aber das wäre zu gefährlich. Wir werden wahrscheinlich don ‘ T wirklich wissen, die pixel-Breite und Höhe des Elements. Auch wenn wir es Taten, es könnte sich ändern. So, hier ist es mit Prozentzahlen:

.Modul {
clip-path:
polygon(
0% 5%, /* Links oben */
5% 0%, /* Links oben */
95% 0%, /* oben rechts */
100% 5%, /* oben rechts */
100% 95%, /* rechts unten */
95% 100%, /* rechts unten */
5% 100%, /* unten Links */
0 95% /* unten Links */
);
}

Das ist OK, aber beachten Sie, wie die Kerben nicht um eine perfekte 45-Grad-Winkel. Das ist, weil das element selbst ist kein Platz. Das wird immer schlimmer, je weniger Platz das element ist.

Wir können verwenden Sie die calc () – Funktion um das zu beheben. Wir werden verwenden Sie Prozentsätze, wenn wir es müssen, sondern nur subtrahiert einen Prozentsatz, um die position und den Winkel wir brauchen.

.Modul {
clip-path:
polygon(
0% 20 px, /* Links oben */
20px 0%, /* Links oben */
calc(100% – 20px) 0%, /* oben rechts */
100% 20px, /* oben rechts */
100% calc(100% – 20px), /* rechts unten */
calc(100% – 20px) 100%, /* rechts unten */
20px 100%, /* unten Links */
0 calc(100% – 20px) /* unten Links */
);
}

Und wissen Sie was? Diese Zahl wird so oft wiederholt, dass können wir auch machen es zu einem Variablen. Wenn wir jemals brauchen werden, um aktualisieren Sie die Zahl höher, dann braucht es nicht, ändert es mal, anstatt aller einzelnen Zeiten.

.Modul {
–notchSize: 20px;

clip-path:
polygon(
0% var(–notchSize),
var(–notchSize) 0%,
calc(100% – var(–notchSize)) 0%,
100% var(–notchSize),
100% calc(100% – var(–notchSize)),
calc(100% – var(–notchSize)) 100%,
var(–notchSize) 100%,
0% calc(100% – var(–notchSize))
);
}

Sie versenden.

Finden Sie die Stift-Notched-Boxen von Chris Coyier (@chriscoyier) auf CodePen.

Dies kann gehen, ohne zu sagen, aber stellen Sie sicher, Sie haben genug Polsterung, Griff die clipping. Wenn Sie wollen, Holen Sie sich wirklich einbilden, man könnte mit CSS die Variablen in den padding-Wert sowie, so dass die mehr Sie Kerbe, die mehr Polsterung da ist.

SHARE
Previous articleBokser Hakket
Next articleNotched Boxes