JSFiddle - React, Tailwind, and code Playground

by CybArt

HTML

<div id="container">
<div id="parallelogram">



</div>
<div id="bottom-rounded-corner">

</div>
<div id="bottom-white">

</div>

</div>

CSS

#container {
                padding-top: 100px;
                background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
                width: 100%;
                height: 100%;
                overflow: hidden;

}


#parallelogram {
  margin-left: 385px;
	width: 100%;
	height: 900px;
	-webkit-transform: skew(-15deg);
	   -moz-transform: skew(-15deg);
	     -o-transform: skew(-15deg);
          transform: skew(-15deg);
	background: white;
  -moz-border-top-left-radius: 100px;
  -webkit-top-left-border-radius: 100px;
  border-top-left-radius: 100px;
 -moz-box-shadow:    inset  0 15px rgba(0, 0, 0, .4);
   -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
   box-shadow:         inset 0 0 15px rgba(0, 0, 0, .4);
}

#bottom-rounded-corner {
  height:122px;
  position:relative;
  width: 200%;
  z-index: 1000;
  margin-top: -80px;
  margin-left: -185px;

  background: url(http://famok.com/wp-content/uploads/2016/11/CornerAndMask.png) top left no-repeat;
 
}

#bottom-white {
  
  height: 100px;
  width: 100%;
  background: white;
  
}