Ich möchte einen einseitigen Versatz erstellen, habe dies jedoch nicht getan. hier ist was ich bisher ausprobiert habe:

    .bg-style1 {
      background: #ccc;
      position: relative;
      display: block;
      z-index: 2;
    }
    .bg-style1:after {
      content: " ";
      position: absolute;
      display: block;
      width: 30%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      background: #333333;
      -ms-transform: skew(-30deg, 0deg);
      -webkit-transform: skew(-30deg, 0deg);
      transform: skew(-30deg, 0deg);
    }

<section class="page">
  <div class="bg-style1">
    .....content goes here
  </div>
</section>

aber es funktioniert nicht. aussehen:

was möchte ich erreichen: