HTML:
<svg width="0" height="0">
  <defs>
    <!-- BLUE GRAPHIC -->
    <g id="blue_background">
      <polygon fill="#C8D9E5" points="[...in the fiddle...]"/>
    </g>

    <!-- GREEN GRAPHIC -->
    <g id="green_background">
      <path fill="#49B974" d="[...in the fiddle...]"/>
    </g>
  </defs>
</svg>


<div class="box">
    <h1>asdasdasd</h1>
    <h1>asdasdasd</h1>
    <h1>asdasdasd</h1>
    <svg class="svg1" viewBox="0 0 600 200" >
        <use xlink:href="#blue_background" width="100%" height="100%"></use>
    </svg>
</div>

<div class="box">
    <h1>asdasdasd</h1>
    <h1>asdasdasd</h1>
    <h1>asdasdasd</h1>
    <svg class="svg2" viewBox="0 0 200 200">
        <use xlink:href="#green_background" width="100%" height="100%"></use>
    </svg>
</div>

.box {
    position: relative;
    width: 400px;
    border: 1px solid #ddd;
}
svg {
    position:absolute;
    height:100%;
    top:0; right:0;
    z-index:-1;
}