Закрепите элемент SVG в положении при изменении размера окна

Question

У меня есть SVG-треугольник, который я использую в качестве эффекта клина на сайте. Однако, когда я уменьшаю размер окна, SVG перемещается не к месту.

Я прикрепил изображение (ниже) того, как оно должно выглядеть, а также ссылку на кодовую ссылку ниже.

Кто-нибудь знает, как я могу получить этот эффект, чтобы он оставался на месте при изменении размера окна?

Это сводит меня с ума.

кодовая ручка: https://codepen.io/emilychews/pen/LrgwZV

Emily

Изображение того, как оно должно выглядеть:

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

Вот еще одна идея с меньшим количеством кода и с градиентом для создания треугольника:

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>

Другой альтернативой является изменение положения SVG, чтобы сделать его внутри элемента, используемого в качестве фона, и настройка его положения:

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>