我创建了一个多边形三 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>
最佳答案
只需将 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>
关于html - 如何在 CSS 中创建彼此相邻的多边形形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29769955/