I came across a cool feature in CSS where you can apply box-shadow and clip-path to an element inside a container to achieve an effect where the selected element fills the entire width of its parents parent container. This is ususally a tricky task, because the element is limitied to the width of the parent container.
Here’s how it works
Using a box shadow and a clipping path you can force the child element to ignore the parent elements width. You will have to set the overflow to hidden on the parents parents width because that will be the width that the child element is now refering to.
.container .innerContainer:nth-child(2) {
box-shadow: 0 0 0 100vmax #000000;
clip-path: inset(0 -100vmax);
background-color: #000000;
color: white;
}
Also set the same background color to the child element as the box-shadow otherwise it will keep the color from the original child element color.
Pretty cool, right?
Normally the innerchild elements can’t break out of it’s parents container (purple dots)
If you’re as passionate about CSS as I am, I highly recommend checking out Kevin Powell. He is really good at explaining the more complex sides of CSS.