Klippe hjørner med CSS
Hvordan få pixel-hjørner på knapper med én enkel button og clip-path — uten å sette sammen tre elementer.
Figma ≠ kode
Noen ganger dukker det opp uventede utfordringer i leveransen fra designer til utvikler. I 321 har vi vårt eget design-system, som spiller på en retro pixel-effekt. Ikonene vi benytter har denne effekten, og da ønsket vi å legge til pixel-hjørner på knappene våre. I Figma ble dette enkelt løst ved å sette sammen 3 biter, som til sammen utgjorde hele knappen.
Denne tilnærmingen er ikke like enkel i kode. Ved å sette sammen 3 elementer, får vi plutselig en unødvendig kompleks komponent, som skalerer dårlig og byr på utfordringer med f.eks. hover-effekt. Så, hvordan kan vi kun ha et HTML-element (button) men også ivareta pixel-effekten? Løsningen ble clip-path i CSS!
clip-path
clip-path lar oss “klippe” et element slik vi ønsker. CSS har en rekke innebygde former vi kan benytte oss av, som f.eks. circle() og rect(). For å få til den ønskede effekten med pixel-hjørner, kan vi bruke polygon(). Her kan vi sende inn koordinater for å lage den ønskede formen vi vil klippe knappen til. Koordinatene består av en x- og en y-komponent. For å få til et pixel-hjørne kan vi dermed definere punktene:
Ved å definere alle hjørnene med samme logikk, ender vi opp med et fullstendig polygon vi kan bruke som clip-path:
--pixel-clip-path: polygon(
0px calc(100% - 8px),
4px calc(100% - 8px),
4px calc(100% - 4px),
8px calc(100% - 4px),
8px 100%,
calc(100% - 8px) 100%,
calc(100% - 8px) calc(100% - 4px),
calc(100% - 4px) calc(100% - 4px),
calc(100% - 4px) calc(100% - 8px),
100% calc(100% - 8px),
100% 8px,
calc(100% - 4px) 8px,
calc(100% - 4px) 4px,
calc(100% - 8px) 4px,
calc(100% - 8px) 0px,
8px 0px,
8px 4px,
4px 4px,
4px 8px,
0px 8px
);
.pixel-corners {
clip-path: var(--pixel-clip-path);
}Denne teknikken gjør at vi kan bruke en helt vanlig knapp i HTML, og unngå kompleksiteten med å holde 3 elementer i sync. Kanskje ønsker du å kun klippe ett av hjørnene? Nå kan du teknikken, så det er bare å klippe i vei!