Try it Live

<!DOCTYPE html>
<html>
  <head>
    <style> 
     .normalval {
      width: 300px;
	  margin:10px;
      padding:20px;
      background-color: gold;
	  text-align:center;
     }
	 
     .skewx1 {
      width: 250px;
	  height:40px;
	  margin:10px;
      padding:10px;
	  margin-left:15px;
      background-color: #33CBCC;
	  text-align:center;
	  transform: skewX(-40deg);
      -ms-transform: skewX(-40deg); 
      -webkit-transform: skewX(-40deg);
	 }	  
     .skewx2 {
      width: 250px;
	  height:40px;
      padding:10px;
	  margin-left:15px;
      background-color: crimson;
	  text-align:center;
	  transform: skewX(40deg);
      -ms-transform: skewX(40deg); 
      -webkit-transform: skewX(40deg);
     }
    </style>
  </head>
  <body>
    <p>Skew(x) property defines x value of the object</p>
    <div class="normalval">
      1. This is without skewX method
    </div>
    <div class="skewx1">
      2(a) SkewX:-40deg;
    </div>
    <div class="skewx2">
      2(b) SkewX:40deg;
    </div>
  </body>
</html>