调整窗口大小时将SVG元素固定在适当的位置

Question

我有一个SVG三角形，正在将其用作网站上的“楔形”效果。但是，当我减小窗口大小时，SVG会移出位置。

我已经在下面附加了一张图像的外观以及下面的Codepen链接。

有人知道我可以如何实现这种效果，以便在调整窗口大小时将其固定在适当的位置吗？

这让我发疯。

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

艾米丽

其外观的图片：

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>