在 HTML 中创建自定义形状区域

Question

对于一个项目，我需要制作一个包含三个区域的页面，每个区域的形状都不同。

像这样：

接触点必须始终位于页面中间，并且每个区域都有一张图片作为背景。单击特定区域的任意位置会将您重定向到另一个页面。

我已经尝试过使用 SVG，但我无法让图像保持相同的纵横比，但 SVG 会根据页面调整大小

html, body {
    margin: 0;
    height: 100%;
}

svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
}

<svg viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">

    <pattern id="image" patternUnits="userSpaceOnUse" width="1920" height="1080" x="0" y="0">
        <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMax slice"/>
    </pattern>

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard">
            <polygon id="top" points="960 540 0 2.27373675e-13 1920 0" fill="red"></polygon>
            <polygon id="left" points="960 1080 0 1080 0 0 960 540"></polygon>
            <polygon id="bottom" points="960 1080 960 540 1920 0 1920 1080" fill="blue"></polygon>

            <use href="#left" fill="url(#image)"></use>

        </g>
    </g>
</svg>

Answer 1

我会考虑 clip-path 和图片的背景

body {
  margin: 0;
  height: 100vh;
  display: flex;
}

.left,
.right {
  width: 50%;
}

.top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: url(https://picsum.photos/800/500?image=1069) center/cover;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.left {
  background: url(https://picsum.photos/800/500?image=1060) center/cover;
}

.right {
  background: url(https://picsum.photos/800/500?image=1050) center/cover;
}

<div class="top">
</div>
<div class="left">
</div>
<div class="right">
</div>

Answer 2

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.main-wrap {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.main-wrap section a {
  width: 100%;
  height: 100%;
  display: block;
}

.main-wrap section[role="s1"] {
  background: #333;
  width: 100%;
  height: calc(50vh);
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.main-wrap section a img {
  width: 100%;
  height: auto;
}

.main-wrap section[role="s2"] {
  width: calc(50vw);
  height: calc(100vh);
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0%, 100% 50%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0%, 100% 50%, 100% 100%, 0% 100%);
}

.main-wrap section[role="s3"] {
  width: calc(50vw);
  height: calc(100vh);
  background: #eee;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-clip-path: polygon(100% 0, 0% 50%, 0 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 50%, 0 100%, 100% 100%);
}

<div class="main-wrap">
  <section role="s1">
    <a href="https://picsum.photos/1200/600">
      <img src="https://picsum.photos/1200/600" alt="">
    </a>
  </section>
  <section role="s2">
    <a href="https://picsum.photos/600/1200/?gravity=east">
      <img src="https://picsum.photos/600/1200/?gravity=east" alt="">
    </a>
  </section>
  <section role="s3">
    <a href="https://picsum.photos/600/1200/?random">
      <img src="https://picsum.photos/600/1200/?random" alt="">
    </a>
  </section>
</div>