CSS inner shadow without box-shadow property

Question

I have some clip-path polygon elements, some are more complex but I'll use a hexagon here.

.hex{
    width: 120px;
    aspect-ratio: 1.1547005 / 1;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    clip-path: polygon(
                    0 50%,
                    25% 0,
                    75% 0,
                    100% 50%,
                    75% 100%,
                    25% 100%
    );
    background: #000;
    color: #FFF;
}

<div class="hex">I have<br />five sides.</div>

Clarification: inset shadow

Box-shadow won't work because it sticks to the bounding box, not the clip-path.

Even with a simple shape like the hexagon, I cannot figure out how to get the box-shadow property to handle the angles, I don't think it's possible.

filter:drop-shadow doesn't handle inset and also can't work outside the clip-path.

Short of replicating my clip-paths on child elements and offsetting them with a background color/gradient... is there a straightforward CSS solution for this I'm missing?

Answer 1

Yes, it is possible if you wrap your element to a parent div and add a drop-shadow to it.

html:

<div class="shadow">
  <div class="hex">I have<br />five sides.</div>
</div>

css:

.hex{
    width: 120px;
    aspect-ratio: 1.1547005 / 1;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    clip-path: polygon(
                    0 50%,
                    25% 0,
                    75% 0,
                    100% 50%,
                    75% 100%,
                    25% 100%
    );
    background: #000;
    color: #FFF;
}

.shadow {
  filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}

Fiddle: https://jsfiddle.net/kongallis/0uajpbs8/2/

For more read: https://css-tricks.com/using-box-shadows-and-clip-path-together/