Anyway to make a div UNDER another div clickable, like a shadow? - css

Question

So... I created this weird solution to a weird problem: I needed shadows with straight sides, like a gradient with clean sides instead of a box-shadow.
I used an :after element to attach a gradient to the bottom of the elements that needed it (in the sample, this is commented out). I then tried an inset shadow with negative size and this works the same way. These work perfectly except for one minor detail: I can't use it like a shadow because the elements it covers sometimes aren't clickable.
Sample: http://codepen.io/syren/pen/jlcym
Some things I've ruled out already:
1) Using inset-shadows on the elements underneath: It needs to be applied to the original element or else it won't function like it's shadow when things move. If I could figure out
2) Using a box-shadow with negative spread or size: This works, and I would use this except it doesn't look like how the designer wants it to.
3) Z-index: It's messy because it's a very dynamic page, so I can use it in some places but not in others because seeing as its a shadow, it should be over everything visually at least.
So, to recap, I want it to look exactly the way it does with the clean edges, and I need it to be attached to the element not the surrounding elements and I'd really like it to be a pure CSS solution, like with pseudo-elements.
Any ideas?

Answer 1

http://codepen.io/anon/pen/cuJqG
html:
<nav>
<h1>I'm an Example Header</h1>
</nav>
<section>
<h3>You can't click me because the shadow above is covering me!</h3>
css:
nav{
border-bottom:3px solid #000;
position:relative;
}
h1{
font-family: "Helvetica";
text-transform:uppercase;
margin: 20px 10px 10px;
}
h3{
font-family: Helvetica, sans-serif;
font-weight: 600;
padding:10px;
margin:0;
cursor: pointer;
width: 98.75%;
color: white;
background: #ff0000;
box-shadow: inset 0 20px 40px -20px #000;
}