Как сверстать вот такие два 4-х угольника?
Обычный градиент под углом на фоне. 
Одна строчка кода.
background: linear-gradient(-45deg, red 50%, black 50%);
У меня переход цвета по середине. Сдвиньте куда нужно и если нужно. 
Можно поставить на фон только одному блоку, второй оставить однотонным (а еще лучше прозрачным). 
Можно задать градиент псевдоэлементу одного из блоков и спозиционировать куда нужно.
https://editor.method.ac/ - за 30 сек такое сверстал

svg рулит мб

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->

 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <rect stroke="#000" transform="rotate(21 78.74279022216778,178.80790710449222) " id="svg_1" height="652.581347" width="336.530156" y="-147.482772" x="-89.522283" stroke-width="1.5" fill="#fff"/>
  <rect stroke="#fff" transform="rotate(21 475.7591552734371,275.76535034179705) " id="svg_3" height="652.581347" width="475.814017" y="-50.525341" x="237.852123" stroke-width="1.5" fill="#f4f413"/>
  <rect stroke="#fff" transform="rotate(21 78.74279022216778,178.80790710449222) " id="svg_4" height="652.581347" width="336.530156" y="-147.482772" x="-89.522283" stroke-width="1.5" fill="#000"/>
 </g>
</svg>