Как сделать резиновую вёрстку угольных фигур с рисунком?
Если c CSS трансформациями не выходит, то картинками это делается не сложно. 
Два блока по 50% с overflow:hidden. В левом background выравнивается по левому краю, в правом по правому. На любой ширине, они будут сходиться в центре
Стоит мыслить в этом направлении:<div class="block1">
	<div class="block2">
		<div class="outer2"></div>
	</div>
	<div class="outer1"></div>
</div>.block1{
	width: 80%;
	height: 40%;
	background: red;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
.outer1{
	background: orange;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.outer1:after{
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-bottom: 10%;
	background: rgba(255, 0, 0, 0.73);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.block2{
	width: 94%;
	height: 91%;
	margin: 0 auto;
	background: green;
	position: relative;
	z-index: 20;
}
.outer2{
	background: orange;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.outer2:after{
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-bottom: 10%;
	background: rgb(1, 136, 1);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
(классы и цвета только для примера, чтобы вы поняли)