Getande Dozen

0
83

Zeggen dat je probeert te trekken uit een design effect waar de hoek van een element worden afgesneden. Misschien bent u een Battlestar Galactica-fan? Of misschien heb je net als de bijzondere effect, omdat het voorkomt op zoek als een typische rechthoek.

Ik vermoed dat er zijn vele manieren om het te doen. Zeker, je zou kunnen gebruik maken van meerdere achtergronden te plaatsen afbeeldingen in de hoeken. Je kon net zo goed gebruik maken van een flexibel SVG-vorm geplaatst in de achtergrond. Ik wed dat er ook een exotische manier om het gebruik van gradients te trekken.

Maar, ik hou van het idee van gewoon een schaar knippen uit de dang hoeken. We wezen enkel dat dankzij de clip-pad. We kunnen gebruik maken van de veelhoek() functie, een lijst van X-en Y-coördinaten en de clip af wat zich buiten hen.

Check out wat er gebeurt als we drie punten: midden boven, rechtsonder, linksonder.

.module {
clip-pad:
polygoon(
50% 0,
100% 100%,
0 100%
);
}

In plaats van slechts drie punten, laten we een lijst van alle acht punten nodig voor onze uitgespaarde hoeken. Kunnen We pixels gebruiken, maar dat zou gevaarlijk zijn. We waarschijnlijk weet eigenlijk niet de pixel breedte of hoogte van het element. Zelfs als we dat deden, zouden kunnen veranderen. Zo, hier is het gebruik van percentages:

.module {
clip-pad:
polygoon(
0% 5%, /* top links */
5% 0%, /* top links */
95% 0%, /* rechtsboven */
100% 5%, /* rechtsboven */
100% 95%, /* onderaan rechts */
95% 100%, /* onderaan rechts */
5% 100%, /* linksonder */
0 95% /* linksonder */
);
}

Dat is OK, maar merk op hoe de inkepingen zijn niet in perfecte 45 graden hoeken. Dat is omdat het element zelf is niet een vierkant. Dat wordt nog erger de minder plein van het element is.

We kunnen gebruik maken van de calc() functie om dat vast te stellen. We gebruiken percentages als we moeten, maar gewoon aftrekken van een percentage te krijgen van de positie en de hoek die we nodig hebben.

.module {
clip-pad:
polygoon(
0% 20px, /* top links */
20px 0%, /* top links */
calc(100% – 20 px) 0%, /* rechtsboven */
100% 20px, /* rechtsboven */
100% calc(100% – 20 px), /* onderaan rechts */
calc(100% – 20 px) 100%, /* onderaan rechts */
20px 100%, /* linksonder */
0 calc(100% – 20 px) /* linksonder */
);
}

En weet je wat? Dat nummer wordt herhaald zo vaak, dat kunnen we er ook voor zorgen dat het een variabele. Als we ooit nodig hebben om de update later, toen allen het neemt is het veranderen van het eens in plaats van al die individuele tijden.

.module {
–notchSize: 20px;

clip-pad:
polygoon(
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))
);
}

Het schip.

Zie de Pen Getande Dozen door Chris Coyier (@chriscoyier) op CodePen.

Dit kan gaan zonder te zeggen, maar zorg ervoor dat u genoeg vulmateriaal voor het verwerken van de clipping. Als u wilt echt zin in, u kunt gebruik maken van CSS variabelen in uw padding waarde, dus hoe meer je notch, de meer padding er is.