有没有办法在CSS中使用clip-path创建这个图片库网格？

Question

我正在尝试创建一个布局，其中左侧有一个大图像，右侧有四个较小的图像排列在网格中。整个容器应该有倾斜的边缘，如下图所示：在此处输入图像描述

我尝试使用剪辑路径，但无法获得顶部和底部间距。我也关注了这篇文章https://css-tricks.com/css-grid-and-custom-shapes-part-3/.

Answer 1

你的意思是这样的吗？

#container {
  --g: 6px;
  display: grid;
  width: 450px;
  aspect-ratio: 1;
  grid: auto-flow 1fr/repeat(1fr);
  gap: var(--g);
  border: 2px solid red;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

#container div {
  width: 100%;
  height: 100%;
  background-color: #000;
  object-fit: cover;
}

#container div:nth-child(1) {
  grid-area: 5/1/span 5/span 5;
  clip-path: polygon(60% 14%, 100% 4%, 100% 80%, 0 100%, 0 14%);
}

#container div:nth-child(2) {
  grid-area: 4/6/span 3/span 2;
  clip-path: polygon(100% 30%, 100% 100%, 0 100%, 0 40%);
}

#container div:nth-child(3) {
  grid-area: 4/8/span 3/span 2;
  clip-path: polygon(100% 20%, 100% 100%, 0 100%, 0 30%);
}

#container div:nth-child(4) {
  grid-area: 6/6/span 3/span 2;
  clip-path: polygon(100% 35%, 100% 100%, 0 100%, 0 35%);
}

#container div:nth-child(5) {
  grid-area: 6/8/span 3/span 2;
  clip-path: polygon(100% 35%, 100% 100%, 0 100%, 0 35%);
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

我的猜测是，您在插入不正确的多边形坐标时尝试使用剪切路径功能。这会导致

clip-path

无法正常工作。有很多工具可以帮助修复这个错误，但我通过快速搜索发现的一个是this。我希望这有帮助！