html - 调整窗口大小时将 SVG 元素固定到位

Question

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

我附上了一张图片(下方)，展示了它的外观以及下方的 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

这是另一个用更少的代码和渐变来创建三 Angular 形的想法:

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>