Pin an SVG Element in Position when the Window Resizes

Question

I have an SVG triangle that i'm using as a "wedge" effect on a site. However, when I reduce the window size the SVG moves out of place.

I've attached an image (below) of how it is supposed to look as well as the codepen link below.

Does anyone know how I can have this effect so it stays pinned in place when the window resizes?

It's driving me insane.

codepen: https://codepen.io/emilychews/pen/LrgwZV

Emily

Image of how it supposed to look:

body {margin: 0; padding: 0;}

.section {
    position: relative;
    display: flex;
    margin: 0 auto; 
    width: 100%;
    box-sizing: border-box;
    padding: 3.583rem 0;
}

.row {
    position: relative;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 80%;
    box-sizing: border-box;
    z-index: 9;
}

.background-block-left-top {
    position: absolute;
    width: 40%;
    height: 50%;
    background: #162f45;
    top: 57px;
}

.two-col {
    padding:8.916rem 2.074rem;
    box-sizing: border-box;
    width: 50%;
    background: wheat;
}

.two-col.col-2 {
    display: flex;
    align-items: center;
    position: relative;
    background: #2b67f3;
    width: 85.5%;
    min-width: 0;
}

#wedge{
  position: absolute;
  width: 40%;
  height: auto;
  top: 23px;
  left: 0;
  z-index: 9;
}

Answer 1

Here is anonther idea with less of code and with gradient to create the triangle:

body {
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  display: flex;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 3.583rem 0;
}

.row {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  width: 80%;
  box-sizing: border-box;
  z-index: 9;
}

.two-col {
  padding: 8.916rem 2.074rem;
  box-sizing: border-box;
  width: 37.5%;
  background: red;
}

.two-col.col-2 {
  display: flex;
  align-items: center;  
  position: relative;
  background: #2b67f3;
  width: 62.5%;
  min-width: 0;
}
.two-col.col-1:before {
    content: "";
    position: absolute;
    top: -150px;
    right: 62.5%;
    left: -100vw;
    height: calc(50% + 150px);
    background: 
      linear-gradient(to top right,#162f45 49.5%,transparent 50%) top/100% 150px no-repeat, 
      linear-gradient(#162f45,#162f45) 0 150px/100% 100% no-repeat;
    z-index: -1;
}

<section class="section">
  <div id="row-2" class="row">
    <div class="two-col col-1"></div>
    <div class="two-col col-2">
      <div class="folio-wrap">
        <h2 class="tl">LOREM IPSUM</h2>
        <p class="tl">Performant, secure and search engine optimised sites and applications. Inset covers content managment, commerce sites or a brochure site to promote a product or service.</p>
      </div>
    </div>
  </div>
</section>

Another alternative is to change the position of the SVG to make it inside the element used as background and adjust its position:

body {
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  display: flex;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 3.583rem 0;
}

.row {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  width: 80%;
  box-sizing: border-box;
  z-index: 9;
}

.background-block-left-top {
  position: absolute;
  width: 40%;
  height: 50%;
  background: #162f45;
  top: 57px;
}

.two-col {
  padding: 8.916rem 2.074rem;
  box-sizing: border-box;
  width: 50%;
  background: red;
}

.two-col.col-2 {
  display: flex;
  align-items: center;
  position: relative;
  background: #2b67f3;
  width: 85.5%;
  min-width: 0;
}

#wedge {
  position: absolute;
  width: 100%;
  height: auto;
  bottom:100%;
  left: 0;
  z-index: 9;
}

<section class="section">
  <div class="background-block-left-top">
  <svg id="wedge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 692 49"><polygon fill="#162f45" points="0 0 0 49 692 49 "/></svg>
  </div>
  <div id="row-2" class="row">
    <div class="two-col col-1"></div>
    <div class="two-col col-2">
      <div class="folio-wrap">
        <h2 class="tl">LOREM IPSUM</h2>
        <p class="tl">Performant, secure and search engine optimised sites and applications. Inset covers content managment, commerce sites or a brochure site to promote a product or service.</p>
      </div>
    </div>
  </div>
</section>