<div class="ribbon horiz"></div>
<div class="ribbon vert"></div>

body {
  background: #f4f4f4;
}

.ribbon {
  position: absolute;
}

.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  transform-origin: bottom right;
}

.horiz {
  background: #2095f2;
  /* Originally #E85937 */
  left: 300px;
  top: 130px;
  width: calc(100% - 300px);
  height: 80px;
}

.horiz::before {
  background: inherit;
  height: 100%;
  width: 420px;
  left: -420px;
  transform: rotate(30deg);
}

.vert {
  background: #212121;
  /* Originally #374957 */
  left: 30px;
  top: 171px;
  height: calc(100% - 172px);
  width: 80px;
}

.vert::before {
  background: inherit;
  width: 95%;
  height: 500px;
  top: -438px;
  left: -33px;
  transform: rotate(55deg);
}

.vert::after {
  background: #2095f2;
  width: 100%;
  height: 92px;
  top: -68px;
  left: 164px;
  transform: skewY(30deg);
}

@media only screen and (max-width: 991px) {
  .horiz {
    left: 300px;
    top: 110px;
    height: 55px;
  }

  .vert {
    width: 55px;
    top: 171px;
  }

  .vert::before {
    top: -458px;
    left: -22px;
  }

  .vert::after {
    height: 62px;
    top: -92px;
    left: 175px;
  }
}

@media only screen and (max-width: 767px) {
  .horiz {
    top: 97px;
  }

  .vert {
    top: 158px;
    height: calc(100% - 185px);
  }
}

@media only screen and (max-width: 680px) {
  .horiz {
    height: 35px;
    left: 100px;
    top: 90px;
    width: calc(100% - 100px);
  }

  .horiz::before {
    left: -420px;
  }

  .vert {
    width: 35px;
    left: 5px;
    top: 100px;
    height: calc(100% - 100px);
  }

  .vert::before {
    top: -474px;
    left: -14px;
  }

  .vert::after {
    height: 40px;
    top: -19px;
    left: 54px;
  }
}

// For more check out zachsaucier.com