svg_image_overlay.html

<style>
#container {
	background-image: url(http://www.fordmuscleforums.com/imagehosting/x106653467eed575f69a.jpg.pagespeed.ic.eqQRzXhPsv.jpg);
	height: 200px;
	width: 1000px;
}

.polygon {
    stroke: black;
}

.image-overlay {
    fill: rgba(212,0,0,0.8);
    stroke-width: 0;
}

.solid-shape {
    fill: rgba(41,46,166,1);
    stroke-width: 0;
}

.transition-overlay {
    fill: rgba(0,0,0,0.3);
    stroke-width: 0.5;
}
</style>

<div id="container">
	<svg height="200px" width="1000px">
		<!-- Image overlay -->
		<polygon class="polygon image-overlay" points="0,0 1000,0 1000,200 0,200" ></polygon>
		<!-- Solid shape -->
		<polygon class="polygon solid-shape" points="0,0 800,0 650,200 0,200"></polygon>
		<!-- Transition overlay -->
		<polygon class="polygon transition-overlay" points="800,0 850,0 700,200 650,200" ></polygon>
	</svg>
</div>