Jeg fandt en super fed funktion i CSS, hvor du kan bruge box-shadow og clip-path på et element inde i en container for at få det til at fylde hele bredden af sin bedsteforælderbeholder. Det plejer at være en tricky udfordring, fordi elementet normalt er begrænset af bredden på forælderbeholderen.
Sådan virker det
Med box-shadow og clip-path kan du få børnelementet til at ignorere forælderens bredde. Husk at sætte overflow til hidden på bedsteforælderens container, fordi det vil være den bredde, som børnelementet nu refererer til.
.container .innerContainer:nth-child(2) {
box-shadow: 0 0 0 100vmax #000000;
clip-path: inset(0 -100vmax);
background-color: #000000;
color: white;
}
Og husk også at give børnelementet den samme baggrundsfarve som box-shadow, ellers vil det tage farven fra det oprindelige børnelement.
Ret fedt, ikke?
Normally the innerchild elements can’t break out of it’s parents container (purple dots)
Hvis du er lige så passioneret omkring CSS som jeg er, kan jeg varmt anbefale at du tjekker Kevin Powell ud. Han er virkelig god til at forklare de mere komplekse sider af CSS.