jquery - How to skew image with CSS? -

i want skew image this

it working when apply div

now want use code img tag doesn't work.

here live code:

https://jsfiddle.net/dbkvdq3u/5/

.steps-widget .step-img-box {    position: relative;    text-align: center;    padding: 12px;    margin-bottom: 6px;    height: 60px;  }  .steps-widget .step-img-box:before {    content: '';    position: absolute;    top: 0;    left: 0;    height: 100%;    width: 51%;    z-index: -1;    -webkit-transform: skew(0deg, 6deg);    -moz-transform: skew(0deg, 6deg);    -ms-transform: skew(0deg, 6deg);    -o-transform: skew(0deg, 6deg);    transform: skew(0deg, 6deg);  }  .steps-widget .step-img-box:after {    z-index: -1;    content: '';    position: absolute;    top: 0;    right: 0;    height: 100%;    width: 50%;    -webkit-transform: skew(0deg, -6deg);    -moz-transform: skew(0deg, -6deg);    -ms-transform: skew(0deg, -6deg);    -o-transform: skew(0deg, -6deg);    transform: skew(0deg, -6deg);  }

<div class="step-img-box">    <img class="img-responsive" src="http://i.imgur.com/e7atspo.jpg" alt="image">  </div>  <!-- end step-img-box -->

you use pseudo elements, using background position property align 2 'halfs' of image:

div {    height: 300px;    width: 300px;    position: relative;    margin: 100px auto;  }  div:before,  div:after {    content: "";    position: absolute;    top: 0;    left: 0;    height: 100%;    width: 50%;    background-size: 300px 300px;  }  div:before {    transform: skewy(10deg);  }  div:after {    left: 50%;    background-position: -100% 0;    transform: skewy(-10deg);  }  .sk:before, .sk:after{  background-image: url(http://lorempixel.com/300/300);}  .sk2:before, .sk2:after{  background-image: url(http://lorempixel.com/400/400);}

<div class="sk"></div>  <div class="sk2"></div>