时间戳

首页 > 解决方案 > 在 HTML 中创建自定义形状区域

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

问题描述

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

像这样 ：

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

我已经尝试过使用 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>

标签： javascripthtmlcsssvgcanvas

解决方案

我会考虑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>

推荐阅读