JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.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);
	}