<style>

  div {position: absolute; width:100%; height: 100%; overflow: hidden;}
  .blue{ background-color: #012169;}
  .red {background-color: #c8102e;}
  .white {background-color: white;}
  .black {background-color: black;}


</style>

<div class="blue" style="width: 1200px; height: 600px;">
  <div class="white" style="transform: translate(0, 240px); height: 120px"> </div>
  <div class="white" style="transform: translate(500px, 0); width: 200px"> </div>

  <div class="white" style="transform: translate(-600px, 240px) rotate(28deg); height: 120px; width:200%;"> </div>
  <div class="white" style="transform: translate(-600px, 240px) rotate(-28deg); height: 120px; width:200%;"> </div>

  <div class="red" style="transform: translate(600px, -45px) rotate(-28deg); height: 30px; width:100%;"> </div>
  <div class="red" style="transform: translate(-600px, -15px) rotate(28deg); height: 30px; width:100%;"> </div>
  <div class="red" style="transform: translate(600px, 585px) rotate(28deg); height: 30px; width:100%;"> </div>
  <div class="red" style="transform: translate(-600px, 615px) rotate(-28deg); height: 30px; width:100%;"> </div>

  <div class="white" style="transform: translate(0, 240px); height: 120px"> </div>
  <div class="white" style="transform: translate(500px, 0); width: 200px"> </div>

  <div class="red" style="transform: translate(0, 270px); height: 60px"> </div>
  <div class="red" style="transform: translate(540px, 0); width: 120px"> </div>

</div>