Box side Skew tricks

by Jithin Raj P R

HTML

<div class="bg-box"></div>


<div class="bg-box-2"></div>


<div class="bg-box-3"></div>

CSS

.bg-box-2 {
  position: relative;
  background: url(https://scontent.fmaa1-1.fna.fbcdn.net/v/t1.0-0/s480x480/10492499_766836143367679_5870385788438363650_n.jpg?oh=8c5e7a0b24c74fea881b7c9c5bbcc246&oe=5A424EF7) no-repeat 100%;
  width: 500px;
  height: 400px;
  ;
  display: inline-block;
  /* IE 9 */
  -ms-transform: matrix(1, -0.1, 0, 1, 0, 0) ;       
  /* Safari */
  -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);       
  /* Standard syntax */
  transform: matrix(1, -0.1, 0, 1, 0, 0) 
}


.bg-box-3{
  position: relative;
  background: url(http://webneel.com/wallpaper/sites/default/files/images/04-2013/island-beach-scenery-wallpaper.preview.jpg) no-repeat 100%;
  width: 500px;
  height: 400px;
  ;
  display: inline-block;
  overflow:hidden;
}
.bg-box-3:after,
.bg-box-3:before {
  content: '';
  position: absolute;
  width:100%;
  height:20%;
  background:rgb(243, 245, 246);
}
.bg-box-3:before{
  top: -3%;
  /* IE 9 */
  -ms-transform: matrix(1, -0.1, 0, 1, 0, 0);      
  /* Safari */
  -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);      
  /* Standard syntax */
  transform: matrix(1, -0.1, 0, 1, 0, 0);
}  
.bg-box-3:after{
  bottom:-3%;
  /* IE 9 */
  -ms-transform: matrix(1, -0.1, 0, 1, 0, 0);      
  /* Safari */
  -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);      
  /* Standard syntax */
  transform: matrix(1, -0.1, 0, 1, 0, 0);
}