one sided skew with css

Question

I want to create a one sided skew, but failed to do so. here is what I\'ve tried so far:

Answer 1

Is your problem because of parents background showing up at the left of skewed block. If yes then you should use transform-origin: 0 0;

    .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);
      transform-origin: 0 0;
    }

  

    .....content goes here