如何使用 clip-path 属性从我的网站中删除空白？

Question

我在我的投资组合网站上工作，并通过应用

clip-path

属性创建了一个独特的标题，如我的附件所示。我使用的代码成功运行。但是，现在我希望删除我网站的两个部分之间的角的每一侧都有一些空白。我包括了下面应用的选择器和属性的副本：

HTML：

<header class="container">
        <p>
...nurtures growth through complex group problem solving. I accomplish this by applying                        active listening skills, focusing on soft metrics to drive key results, and take a forward thinking
approach when setting up policies and processes. I believe preventing stagnation is crucial in an industry that's constantly adapting and growing day by day.
        </p>         
</header>

<!-- ********************* PROJECTS / PORTFOLIO ********************* -->

<section class="projects">
        <div class="content-wrap divider">
          <h2>Featured Projects</h2>
          <p>
            View selected projects below, more information can be found at
            <a class="btn" href="#">test.com</a>
          </p>

CSS：

.container {
    height: 95vh;
    background: #2F3061;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 80vh, 50% 100%, 0 80vh);
    overflow: hidden;
}
.projects {
    background: #F7FFF7;
}

我想删除这个空格，但不要将下面部分的

background-color

更改为白色。我在想解决这个问题的最好方法是将相同的

clip-path

属性应用于“特色项目”部分，但使用不同的值可能会抵消我对上述所做的事情？有人知道如何微调这个公式以及如何处理这个吗？

Answer 1

实现此目的的一种方法是在容器上使用伪元素来绘制尖锐的背景并包括淡绿色。

这段代码将绿色背景放在 before 伪元素上，将蓝色背景放在 after 伪元素上，并像原始代码一样使用 clip-path 来创建蓝色形状。

* {
  margin: 0;
}

.container {
  width: 100vw;
  height: 95vh;
  top: 0;
  left: 0;
  position: relative;
  overflow: hidden;
}

.container::before,
.container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.container::before {
  background: #F7FFF7;
}

.container::after {
  clip-path: polygon(0 0, 100% 0, 100% 80vh, 50% 100%, 0 80vh);
  background: #2F3061;
}

.projects {
  background: #F7FFF7;
}

<header class="container">
  <p>
    ...nurtures growth through complex group problem solving. I accomplish this by applying active listening skills, focusing on soft metrics to drive key results, and take a forward thinking approach when setting up policies and processes. I believe preventing
    stagnation is crucial in an industry that's constantly adapting and growing day by day.
  </p>
</header>

<!-- ********************* PROJECTS / PORTFOLIO ********************* -->

<section class="projects">
  <div class="content-wrap divider">
    <h2>Featured Projects</h2>
    <p>
      View selected projects below, more information can be found at
      <a class="btn" href="#">test.com</a>
    </p>