Notched Boxes

Angenommen, Sie versuchen, einen Designeffekt zu erzielen, bei dem die Ecken eines Elements abgeschnitten sind. Vielleicht sind Sie ein Battlestar Galactica Fan? Oder vielleicht mögen Sie einfach den ungewöhnlichen Effekt, da er nicht wie ein typisches Rechteck aussieht.

Ich vermute, es gibt viele Wege, das zu tun. Sicher, Sie könnten mehrere Hintergründe verwenden, um Bilder in den Ecken zu platzieren. Sie könnten genauso gut eine flexible SVG-Form im Hintergrund verwenden. Ich wette, es gibt auch einen exotischen Weg, um es mit Farbverläufen hinzubekommen.

Aber mir gefällt die Idee, einfach eine Schere zu nehmen und die verdammten Ecken abzuschneiden. Das können wir im Wesentlichen dank clip-path tun. Wir können die Funktion polygon() verwenden, ihr eine Liste von X- und Y-Koordinaten übergeben und alles ausschneiden, was außerhalb davon liegt.

Schauen Sie, was passiert, wenn wir drei Punkte angeben: Mitte oben, unten rechts, unten links.

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

Anstatt nur drei Punkte, listen wir alle acht Punkte auf, die für unsere eingekerbten Ecken benötigt werden. Wir könnten Pixel verwenden, aber das wäre gefährlich. Wir kennen wahrscheinlich die Pixelbreite oder -höhe des Elements nicht wirklich. Selbst wenn wir es wüssten, könnte es sich ändern. Hier ist es also mit Prozentangaben

.module {
  clip-path: 
    polygon(
      0% 5%,     /* top left */
      5% 0%,     /* top left */
      95% 0%,    /* top right */
      100% 5%,   /* top right */
      100% 95%,  /* bottom right */
      95% 100%,  /* bottom right */
      5% 100%,   /* bottom left */
      0 95%      /* bottom left */
    );
}

Das ist in Ordnung, aber bemerken Sie, dass die Einkerbungen keine perfekten 45-Grad-Winkel haben. Das liegt daran, dass das Element selbst kein Quadrat ist. Das verschlimmert sich, je weniger quadratisch das Element ist.

Wir können die Funktion calc() verwenden, um das zu beheben. Wir verwenden Prozentangaben, wenn wir müssen, aber subtrahieren einfach von einer Prozentangabe, um die benötigte Position und den Winkel zu erhalten.

.module {
  clip-path: 
    polygon(
      0% 20px,                 /* top left */
      20px 0%,                 /* top left */
      calc(100% - 20px) 0%,    /* top right */
      100% 20px,               /* top right */
      100% calc(100% - 20px),  /* bottom right */
      calc(100% - 20px) 100%,  /* bottom right */
      20px 100%,               /* bottom left */
      0 calc(100% - 20px)      /* bottom left */
    );
}

Und wissen Sie was? Diese Zahl wiederholt sich so oft, dass wir sie genauso gut zu einer Variable machen könnten. Wenn wir die Zahl später jemals aktualisieren müssen, müssen wir sie nur einmal ändern, anstatt all diese einzelnen Male.

.module {
  --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))
    );
}

Schicken Sie es los.

Siehe den Stift Eingerückte Boxen von Chris Coyier (@chriscoyier) auf CodePen.

Das mag selbstverständlich sein, aber stellen Sie sicher, dass Sie genügend Innenabstand haben, um die Beschneidung zu bewältigen. Wenn Sie es wirklich schick haben möchten, könnten Sie auch CSS-Variablen für Ihren Innenabstand verwenden, sodass je mehr Sie einrücken, desto mehr Innenabstand vorhanden ist.