如何在 CSS 中创建彼此相邻的多边形形状 [英] How to create polygonal shapes right next to each other in CSS

查看：32
本文介绍了如何在 CSS 中创建彼此相邻的多边形形状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个多边形三角形，我想将它们并排堆叠

我使用了 shape-outside，但它似乎不起作用.我希望这是动态的，以便可以在无需更改代码的情况下添加更多内容

div:nth-child(odd) {宽度:280px；高度:280px；背景:#1e90ff；-webkit-clip-path: 多边形(50% 0%, 0% 100%, 100% 100%);显示:内联块；背景:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) 中心；背景尺寸:封面；向左飘浮;剪辑路径:多边形(50% 0%、0% 100%、100% 100%)；形状外:多边形(50％0％，0％100％，100％100％)；}div:第n个孩子(偶数){宽度:280px；高度:280px；背景:#1e90ff；显示:内联块；背景:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) 中心；背景尺寸:封面；向左飘浮;-webkit-clip-path: 多边形(50% 100%, 0 0, 100% 0);剪辑路径:多边形(50% 100%, 0 0, 100% 0)；形状外:多边形(50% 100%, 0 0, 100% 0)；左:-137px；}div {位置:相对；}

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

解决方案

你可以使用

的伪选择器

 :nth-child(even)

为了选择所有偶数"元素.

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

.parent {高度:100px；宽度:100px；边距:2px；显示:内联块；位置:相对；溢出:隐藏；左边距:-50px；}.parent:nth-child(odd) {顶部:-50px；}.父母:第一个孩子{左边距:0；}.parent:nth-child(odd) .child {位置:绝对；底部:0；左:0；背景:番茄；高度:70%；宽度:70%；变换:旋转(45度)；变换原点:左下角；}.parent:nth-child(even) .child {位置:绝对；顶部:0；左:0；背景:番茄；高度:70%；宽度:70%；变换:旋转(-45度)；变换原点:左上角；}

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

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

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

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

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

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

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

I have created a polygon triangle and I want to stack them next to each other

I have used shape-outside however it does not seem to be working. I want this to be dynamic so more can be added without the need to change the code 

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>

解决方案

You could use the pseudo selector of

 :nth-child(even)

in order to select all 'even' elements.

I haven't used the clip-path (due to browser compatibility issues), so this wouldn't be the cleanest, but this (should) work on more browsers:

.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;
}

<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>

这篇关于如何在 CSS 中创建彼此相邻的多边形形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆