Question

我创建了一个多边形三角形，我希望将它们彼此相邻叠加

我已经使用了外形，但它似乎没有用。我希望这是动态的，所以可以添加更多，而无需更改代码

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

我已经快速修复了你的css（所以原谅错误），现在它们彼此相邻并且你可以添加你想要的数量，只要有空间它们就会对齐。

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%);
  margin-left: -141px;
}

和

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; */
  margin-left: -141px;
}

和

body:nth-child(1){
margin-left:0; /* To clear the first marign */
}

Answer 2

您可以使用

的伪选择器

 :nth-child(even)

为了选择所有＆＃39;偶然＆＃39;元件。

我还没有使用剪辑路径（由于浏览器兼容性问题），所以这不是最干净的，但这（应该）适用于更多浏览器：

＆＃13;

.parent {
  height: 100px;
  width: 100px;
  margin: 2px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin-left: -50px;
}
.parent:nth-child(odd) {
  top: -50px;
}
.parent:first-child {
  margin-left: 0;
}
.parent:nth-child(odd) .child {
  position: absolute;
  bottom: 0;
  left: 0;
  background: tomato;
  height: 70%;
  width: 70%;
  transform: rotate(45deg);
  transform-origin: bottom left;
}
.parent:nth-child(even) .child {
  position: absolute;
  top: 0;
  left: 0;
  background: tomato;
  height: 70%;
  width: 70%;
  transform: rotate(-45deg);
  transform-origin: top left;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

Answer 3

只需将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>

在css中堆叠多边形

3 个答案: