div { position: relative; display: inline-block; overflow: hidden; } div:before, div:after { position: absolute; top: 0; left: -30px; width: 50%; border-top: 30px solid; border-right: 30px solid transparent; color: white; content: ''; } div:after { right: -30px; left: auto; border-right: none; border-left: 30px solid transparent; }
<div> <img src="http://placekitten.com/200/300"> </div>