html - 如何在 CSS 中创建彼此相邻的多边形形状

Question

我创建了一个多边形三 Angular 形，我想将它们堆叠在一起

我使用了 shape-outside，但它似乎不起作用。我希望它是动态的，这样就可以添加更多内容而无需更改代码

div:nth-child(odd) {
  width: 280px;
  height: 280px;
  background: #1e90ff;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
  background-size: cover;
  float: left;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
}

div:nth-child(even) {
  width: 280px;
  height: 280px;
  background: #1e90ff;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
  background-size: cover;
  float: left;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  shape-outside: polygon(50% 100%, 0 0, 100% 0);
  left: -137px;
}


div {
  position: relative;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 1

只需将 margin-right: -274px; 添加到 div:nth-child(even) 即可。

div:nth-child(odd) {
  width: 280px;
  height: 280px;
  background: #1e90ff;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
  background-size: cover;
  float: left;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
}

div:nth-child(even) {
  width: 280px;
  height: 280px;
  margin-right: -274px;
  background: #1e90ff;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
  background-size: cover;
  float: left;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  shape-outside: polygon(50% 100%, 0 0, 100% 0);
  left: -137px;
}


div {
  position: relative;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>