CSS3 fatiado papel sombra

Aqui está outro exercício CSS3: papel cortado.

A ideia é replicar o visual de um panfleto com bordas perfuradas. Do tipo que você arranca um número, e então você perde o número e nunca o encontra novamente.

Aqui está o exercício concluído. É responsivo. Certifique-se de redimensionar seu navegador !: http://cdpn.io/tnJfG

E caso você não queira ir para essa página, aqui está o (relevante) 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!