Можно попробовать сделать при помощи трансформаций.
Вот по быстрому пример набросал:
<div class="treangle">
<div class="treangle--left"></div>
<div class="treangle--right"></div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
}
.treangle {
width: 100%;
height: 100%;
position: relative;
background-color: #000;
overflow: hidden;
[class*='treangle--'] {
width: 100%;
height: 50%;
position: absolute;
background-color: yellow;
}
.treangle--left {
float: left;
left: -50%;
transform: rotate(20deg);
transform: matrix(-1, -0.2, 0, 1, 0, 0);
}
.treangle--right {
float: right;
right: -50%;
transform: rotate(-20deg);
transform: matrix(1, -0.2, 0, 1, 0, 0);
}
}
Все будет ресайзиться как надо. Вопрос только в поддержке браузеров.
Рабочий пример. 
