Question

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

我环顾四周，找到了CSS + HTML来创建带有图像的Rhomboid，但它是整个图像，只有这些Rhomboid形状中的一个。

＆＃13;

.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");
}

＆＃13;

<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>

＆＃13;

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

Answer 1

你可以做到这一点的一种方法就是利用一个更复杂的剪切路径，里面有三个菱形。有一些工具可以帮助您“绘制”您想要的路径并为您生成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/ 有一个快速而混乱的演示，我可以“画”来创造这样的效果。

Triple＆＃39; Rhomboid＆＃39;图像分割CSS

1 个答案: