CSS3 Sliced Paper Shadow

Here's another CSS3 Exercise: sliced paper.

The idea is to replicate the look of a flier with perforated edges. The kind you tear a number off of, and then you loose the number and never find it again.

Here's the finished exercise. It's responsive. Make sure to resize your browser!: http://cdpn.io/tnJfG

And in case you don't want to go to that page, here's the (relevant) SCSS:

@import url(http://fonts.googleapis.com/css?family=Rokkitt:700);

$red: #CA3B27;
$white: #FfFDFB;
$shad: #262936;

.item {
    position: relative;
}

// The important code is below:

.item:first-of-type:after {
  display: block;
  content: "";
  @include background(
            linear-gradient(-90deg, rgba($white, 0), rgba($white, 1)),
            linear-gradient(left, rgba($shad, 0), rgba($shad, 0) 85%, rgba($shad, 0.3) 95%),
            linear-gradient(3deg, rgba($shad, 0) 50%, rgba($shad, 0.3))
           );
  width: 1rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.item:last-of-type:after {
  display: block;
  content: "";
  @include background(
            linear-gradient(-90deg, rgba($white, 0), rgba($white, 1)),
            linear-gradient(right, rgba($shad, 0), rgba($shad, 0) 85%, rgba($shad, 0.3) 95%),
            linear-gradient(-183deg, rgba($shad, 0) 50%, rgba($shad, 0.3))
           );
  width: 1rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}</code><a href="http://codepen.io/murphyrandle/pen/tnJfG">Check out this Pen!</a></pre>
<script async src="http://codepen.io/assets/embed/ei.js"></script>



Just remember that pseudo elements can be absolutely positioned relative to their parent so long as the parent has a position: set to something!