Creating a partial box shadow on a skewed div
<p>I'm trying to create a partial shadow on a skewed div, as close as I can get to this creative.</p>

<p><a href="https://i.stack.imgur.com/dwbDP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dwbDP.png" alt="enter image description here"></a></p>

<p>Right now I've been trying to do this with pseudo elements (before specifically) but I found that those elements behave strangely whenever I skew the element they are applied to. The pseudo element keeps appearing on top of my div, even though the z-index is set to -1. No matter what I do with z-index, it will stay on top of it. I want it to be behind the div it's applied to, and in front of the div below, like in the creative.</p>

<p><a href="https://i.stack.imgur.com/3DufF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3DufF.png" alt="enter image description here"></a></p>

<p>Here's my ::before code and a link to the codepen</p>

<p>CSS</p>

<pre><code>/*! Shadows */
#test-title {
  position: relative;
}

#test-title:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
</code></pre>

<p><a href="http://codepen.io/kathryncrawford/pen/WwWEma" rel="noreferrer">http://codepen.io/kathryncrawford/pen/WwWEma</a></p>