三重 'Rhomboid' 图像分割 CSS

Question

我正在尝试重新设计网站主页。如何将当前使用的全屏背景图片拆分为 3 个部分，每个部分之间有间隙，图像仅显示在菱形内？

我环顾四周，发现 CSS + HTML 可以创建带有内部图像的菱形，但它是整个图像，只是这些菱形中的一个。

.polygon-each {
  padding: 10px;
  text-align: center;
}
.polygon-each-img-wrap img {
  margin-bottom: 10px;
}
.polygon-each img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
}
img {
  max-width: 100%;
  height: auto;
}
.polygon-clip-rhomboid {
  -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
  clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
  -webkit-clip-path: url("#polygon-clip-rhomboid");
  clip-path: url("#polygon-clip-rhomboid");
}

<div class="polygon-each">
  <div class="polygon-each-img-wrap">
    <img src="/img/rules-bgrnd.png" alt="demo-clip-rhomboid" class="polygon-clip-rhomboid">
  </div>

  <svg class="clip-svg">
    <defs>
      <clipPath id="polygon-clip-rhomboid" clipPathUnits="objectBoundingBox">
        <polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
      </clipPath>
    </defs>
  </svg>
</div>

可以看到当前显示的视图here

Answer 1

你可以做到这一点的一种方法是利用一个更复杂的剪切路径，其中包含三个菱形。有一些工具可以帮助您 "draw" 您想要的路径并为您生成 CSS，http://bennettfeely.com/clippy/ 是我能够找到的一个，但似乎还有更多。

本质上，您希望路径的点定位方式看起来像是在创建三种不同的形状，即使它们都是一个剪辑。

.polygon-each {
  padding: 10px;
  text-align: center;
}
.polygon-each-img-wrap img {
  margin-bottom: 10px;
  width:100%;
    -webkit-clip-path: polygon(0% 100%, 15% 0, 33% 0%, 18% 100%, 32% 100%, 46% 0, 66% 0, 52% 100%, 68% 100%, 80% 0%, 100% 0%, 91% 100%);
clip-path: polygon(0% 100%, 15% 0, 33% 0%, 18% 100%, 32% 100%, 46% 0, 66% 0, 52% 100%, 68% 100%, 80% 0%, 100% 0%, 91% 100%);
}
.polygon-each img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
}
img {
  max-width: 100%;
  height: auto;
}

https://jsfiddle.net/bjc89nkv/ 有一个快速而混乱的演示，展示了我 "draw" 创造这种效果的能力。

三重 'Rhomboid' 图像分割 CSS

Triple 'Rhomboid' Image Split CSS

html

css

svg

shapes