Hack Lådor

0
48

Säg att du försöker dra bort en design effekt där hörnet av ett element är avskurna. Kanske är du en Battlestar Galactica-fan? Eller kanske du bara gillar ovanlig effekt av det, eftersom man slipper se ut som en typisk rektangel.

Jag misstänker att det finns många sätt att göra det. Visst, du kan använda flera olika bakgrund för att placera bilder i hörnen. Du kan lika gärna använda en flexibel SVG form placeras i bakgrunden. Jag satsa det finns också en exotisk sätt att använda övertoningar för att dra bort det.

Men, jag gillar tanken på att helt enkelt ta lite sax och klippning av dang hörn. Vi i huvudsak kan göra bara genom att klämma väg. Vi kan använda polygon () – funktion, ge det en lista av X-och Y-koordinater och klipp bort det som är utanför dem.

Kolla vad som händer om vi listar tre punkter: (i mitten längst upp, längst ner till höger, längst ner till vänster.

.modul {
clip-väg:
polygon(
50% 0,
100% 100%,
0 100%
);
}

Istället för att bara tre poäng, låt oss lista alla åtta poäng som behövs för att våra avfasat hörn. Vi skulle kunna använda pixlar, men att det skulle vara farligt. Vi har förmodligen inte riktigt vet pixlars bredd eller höjd av elementet. Även om vi gjorde det, det kan komma att ändras. Så här är det att använda procentsatser:

.modul {
clip-väg:
polygon(
0% 5%, /* överst till vänster */
5% 0%, /* överst till vänster */
95% 0%, /* upp till höger */
100% 5%, /* upp till höger */
100% 95%, /* botten höger */
95% 100%, /* botten höger */
5% 100%, /* längst ned till vänster */
0 95% /* längst ned till vänster */
);
}

Det är OK, men lägg märke till hur de utskjutande delarna inte på perfekta 45 graders vinkel. Det beror på att de element i sig inte är en kvadrat. Det blir värre det mindre torget elementet.

Vi kan använda calc () – funktionen för att fixa det. Vi kommer att använda procentsatser när vi måste, utan bara att subtrahera från en andel för att få position och vinkel vi behöver.

.modul {
clip-väg:
polygon(
0% 20px, /* överst till vänster */
20px 0%, /* överst till vänster */
calc(100% – 20px) 0%, /* upp till höger */
100% 20px, /* upp till höger */
100% calc(100% – 20px), /* botten höger */
calc(100% – 20px) 100%, /* botten höger */
20px 100%, /* längst ned till vänster */
0 calc(100% – 20px) /* längst ned till vänster */
);
}

Och vet du vad? Att antalet upprepas så många gånger att vi kan lika väl göra det till en variabel. Om vi någonsin behöver uppdatera antalet senare, då allt som krävs är att ändra det en gång i stället för alla dessa enskilda gånger.

.modul {
–notchSize: 20px;

clip-väg:
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))
);
}

Skicka det.

Se Pennan som Spårat Lådor av Chris Coyier (@chriscoyier) på CodePen.

Detta kan gå utan att säga, men se till att du har tillräckligt med stoppning för att hantera klippning. Om du vill få riktigt snygga, kan du använda CSS-variabler i din utfyllnad värde, så ju mer du notch, mer stoppning det.