How to create crooked shadow

Recently I was working on a very interesting and challenging project. I was told to use CSS wherever possible. That was actually the first time I’ve heard someone says those words and my heart was full of joy. One of the most challenging features to build was to add a shadow on a crooked border. I know it doesn’t sound either glamorous or complicated, but it kinda is.

Crooked border

Here’s the desired design for the hero section with crooked border (notice the crooked shadow at the bottom):

Let’s break this into smaller modules:

hero block

hero title

hero icon

crooked border

inner shadow

First three are easy to create, especially if using flexbox to center the content.

Crooked shadow

To create an inset shadow, we usually use a box-shadow property. Every box could have a shadow, including our :after pseudo element. But we cannot apply box-shadow here because we have a box, although it looks like a triangle and shadow is not crooked.

To solve this problem, I’ve even tried to rotate another pseudo element with a shadow and place it under an existing triangle. It worked, but not at every viewport size. I wasn’t happy with that solution.

Then it hit me—I should use a crooked transparent gradient on a box that is as tall as :after pseudo element. Wait, what? I’ll try to explain this step by step.

First, we should create an element that is as tall as :after pseudo element. We could use :before pseudo element for this purpose. Then we should add linear gradient at the correct angle and percentage. In our case, linear gradient should go to the top left corner until 50%. Finally, we should scale and translate element to make it visible.