CodePen

HTML

            
              <div class="parallelogram"></div>
            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing: border-box;
}

div {
  margin:50px;
  width: 150px;
  height: 100px;
}

.parallelogram {
  transform: skew(20deg) rotate(-10deg) translateZ(0);
  background: grey;
  position:relattive;
 }

.parallelogram:after {
  content:"";
  position:absolute;
  left:100%;
  width:px;
  height:0px;
  border-top:60px solid white;
  border-left: 20px solid grey;
  border-bottom:40px solid white;
}

.parallelogram:before{
  content:"";
  position:absolute;
  background:white;
  width:0px;
  height:0px;
  border-top:40px solid white;
  border-right: 20px solid grey;
  border-bottom:60px solid white;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................