html - 带有背景图像的 CSS 三角形形状部分

Question

我需要创建这样的布局：

布局

如您所见，我需要在每个部分上设置三角形并设置背景图像

我尝试使用剪辑路径并且我设法制作了形状，但我无法统一由此产生的分离，第一个代码是用剪辑路径实现的（我想可能是 css-grid 和 grid-areas工作，但我没有尝试过喷气式飞机）

    main {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      position: relative;
    }

    .service {
      height: 100vh;
      display:flex;
      justify-content:center;
      align-items:center;
    }

    .service-1 {
      background-color: blue;
      clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 65%);
      top: 5px;
      left: 5px;
      right: 0;
      bottom: 0;
    }
    .service-2 {
      background-color: pink;
      clip-path: polygon(0 0, 100% 34%, 100% 65%, 0 100%);
      top: 0;
      left: 0;
      right: 5px;
      bottom: 5px;
    }
    
    .service-3 {
      background-color: yellow;
      clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 65%);
      top: 5px;
      left: 5px;
      right: 0;
      bottom: 0;
    }

<main>
      <div class="service service-1">
        <h2>Service 1</h2>
      </div>
      <div class="service service-2">
        <h2>Service 2</h2>
      </div>
      <div class="service service-3">
        <h2>Service 3</h2>
      </div>
    </main>

另外，我尝试使用 SVG，但结果相同

    main {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      position: relative;
    }

    .service {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .service-1 {
      background-color: blue;
      position: relative;
    }

    .service-1 .custom-shape-divider-top-1624638189 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
    }

    .service-1 .custom-shape-divider-top-1624638189 svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 150px;
      transform: rotateY(180deg);
    }

    .service-1 .custom-shape-divider-top-1624638189 .shape-fill {
      fill: #ffffff;
    }

    .service-1 .custom-shape-divider-bottom-1624638504 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      transform: rotate(180deg);
    }

    .service-1 .custom-shape-divider-bottom-1624638504 svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 150px;
    }

    .service-1 .custom-shape-divider-bottom-1624638504 .shape-fill {
      fill: #ffffff;
    }

    .service-2 {
      background-color: pink;
      position: relative;
    }

    .service-2 .custom-shape-divider-top-1624638774 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
    }

    .service-2 .custom-shape-divider-top-1624638774 svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 150px;
    }

    .service-2 .custom-shape-divider-top-1624638774 .shape-fill {
      fill: #ffffff;
    }

    .service-2 .custom-shape-divider-bottom-1624638661 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      transform: rotate(180deg);
    }

    .service-2 .custom-shape-divider-bottom-1624638661 svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 150px;
      transform: rotateY(180deg);
    }

    .service-2 .custom-shape-divider-bottom-1624638661 .shape-fill {
      fill: #ffffff;
    }
    .service-3 {
      background-color: yellow;
      position: relative;
    }

    .service-3 .custom-shape-divider-top-1624638189 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
    }

    .service-3 .custom-shape-divider-top-1624638189 svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 150px;
      transform: rotateY(180deg);
    }

    .service-3 .custom-shape-divider-top-1624638189 .shape-fill {
      fill: #ffffff;
    }

    .service-3 .custom-shape-divider-bottom-1624638504 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      transform: rotate(180deg);
    }

    .service-3 .custom-shape-divider-bottom-1624638504 svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 150px;
    }

    .service-3 .custom-shape-divider-bottom-1624638504 .shape-fill {
      fill: #ffffff;
    }

<main>
      <div class="service service-1">
        <div class="custom-shape-divider-top-1624638189">
          <svg
            data-name="Layer 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1200 120"
            preserveAspectRatio="none"
          >
            <path
              d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
              class="shape-fill"
            ></path>
          </svg>
        </div>
        <h2>Service 1</h2>
        <div class="custom-shape-divider-bottom-1624638504">
          <svg
            data-name="Layer 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1200 120"
            preserveAspectRatio="none"
          >
            <path
              d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
              class="shape-fill"
            ></path>
          </svg>
        </div>
      </div>
      <div class="service service-2">
        <div class="custom-shape-divider-top-1624638774">
          <svg
            data-name="Layer 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1200 120"
            preserveAspectRatio="none"
          >
            <path
              d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
              class="shape-fill"
            ></path>
          </svg>
        </div>
        <h2>Service 2</h2>
        <div class="custom-shape-divider-bottom-1624638661">
          <svg
            data-name="Layer 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1200 120"
            preserveAspectRatio="none"
          >
            <path
              d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
              class="shape-fill"
            ></path>
          </svg>
        </div>
      </div>
      <div class="service service-3">
        <div class="custom-shape-divider-top-1624638189">
          <svg
            data-name="Layer 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1200 120"
            preserveAspectRatio="none"
          >
            <path
              d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
              class="shape-fill"
            ></path>
          </svg>
        </div>
        <h2>Service 3</h2>
        <div class="custom-shape-divider-bottom-1624638504">
          <svg
            data-name="Layer 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1200 120"
            preserveAspectRatio="none"
          >
            <path
              d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
              class="shape-fill"
            ></path>
          </svg>
        </div>
      </div>
      </div>
    </main>

标签： htmlcss