JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div>
  <div class="box"></div>
</div>
<div id="parallelogram"></div>
<svg width="1000" height="1000">
  <clipPath id="clipPolygon">
    <polygon points="945 405,944 9,90 5,86 405">
    </polygon>
  </clipPath>
</svg>

CSS

body {
  overflow-x: hidden;
  margin: 0;
  background: darkblue;
}
/*Chrome,Safari*/
-webkit-clip-path: polygon(945px 405px,944px 9px,90px 5px,86px 405px);

/*Firefox*/
clip-path: url("#clipPolygon");
div {
  width: 500px;
  height: 500px;
  position: relative;
  background: darkblue;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
div.box {
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 73%);
  clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 73%);
  background: url(http://picsum.photos/1200/900) no-repeat;
  top:0;left:0;position: absolute;
   backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
  #parallelogram {
      width: 150px;
      height: 100px;
      transform: skew(20deg);
      background: red;
      backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
    }

JavaScript

var a = function(b){
	return function(c , t){
  	console.log( c * b * t)
  }
}

var e = a(5);

e(2,10);