我创建了一个多边形三角形，我想将它们堆叠在一起
我已经使用了 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>
只需添加margin-right: -274px; to 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
