Bokser Hakket

0
66

Si at du prøver å trekke ut en design effekt der hjørne av et element blir kuttet av. Kanskje du er en Battlestar Galactica fan? Eller kanskje du bare liker uvanlig effekt av det, siden det unngår ser ut som en typisk rektangel.

Jeg mistenker at det er mange måter å gjøre det på. Sikkert, vil du kunne bruke flere bakgrunner for å plassere bilder i hjørnene. Du kan like godt bruke en fleksibel SVG form plassert i bakgrunnen. Jeg vedder på at det er også en eksotisk måte å bruke fargeovergangar å dra den av.

Men, jeg liker tanken på å ta noen saks og klipping av dang hjørner. Vi i hovedsak kan gjøre akkurat som takk for å clip-banen. Vi kan bruke polygon () – funksjonen, gir det en liste med X-og Y-koordinater og klippet bort det som er på utsiden av dem.

Sjekk ut hva som skjer hvis vi liste opp tre punkter: i midten øverst, nederst til høyre, nederst til venstre.

.modul {
klipp-banen:
polygon(
50% 0,
100% 100%,
0 100%
);
}

I stedet for bare tre poeng, la oss liste opp alle åtte poeng som trengs for våre hakket hjørner. Vi kan også bruke piksler, men det ville være farlig. Vi sannsynligvis ikke egentlig vet pixel bredde eller høyde av elementet. Selv om vi gjorde det, det kan endre. Så, her er det ved hjelp av prosenter:

.modul {
klipp-banen:
polygon(
0% 5%, /* øverst til venstre */
5% 0%, /* øverst til venstre */
95% 0%, /* øverst til høyre */
100% 5%, /* øverst til høyre */
100% 95%, /* nederst til høyre */
95% 100%, /* nederst til høyre */
5% 100%, /* nederst til venstre */
0 95% /* nederst til venstre */
);
}

Det er OK, men legg merke til hvordan hakkene ikke på perfekt 45-graders vinkel. Det er fordi element i seg selv ikke er en firkant. Det blir verre jo mindre square elementet er.

Vi kan bruke calc-funksjonen() til å fikse det. Vi vil bruke prosenter når vi må, men bare trekke fra en andel for å komme i posisjon og vinkel vi trenger.

.modul {
klipp-banen:
polygon(
0% 20 piksler, /* øverst til venstre */
20 piksler 0%, /* øverst til venstre */
calc(100% – 20 piksler) 0%, /* øverst til høyre */
100% 20 piksler, /* øverst til høyre */
100% calc(100% – 20 piksler), /* nederst til høyre */
calc(100% – 20 piksler) 100%, /* nederst til høyre */
20 piksler 100%, /* nederst til venstre */
0 calc(100% – 20 piksler) /* nederst til venstre */
);
}

Og vet du hva? At antallet er gjentatt så mange ganger at vi kan like godt gjøre det til en variabel. Hvis vi noen gang trenger å oppdatere antall senere, så er alt det tar å endre den gang, i stedet for alle disse enkelte ganger.

.modul {
–notchSize: 20 piksler;

klipp-banen:
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))
);
}

Skipet det.

Se Penn Hakket Bokser av Chris Coyier (@chriscoyier) på CodePen.

Dette kan gå uten å si, men sørg for at du har nok polstring til å håndtere den klipping. Hvis du ønsker å få virkelig har lyst på, du kan bruke CSS variabler i din polstring verdi så vel, så jo mer du hakket mer polstring det.

SHARE
Previous articleHack Lådor
Next articleNotched-Boxen