你能在CSS中创建非对称形状吗？

Question

我希望创建4种不同的形状，其内容区域将起响应作用。下面是一个示例图像 -

是否可以在不使用svg的情况下创建4个这样的div容器？我知道你可以在容器内部创建一个三角形形状并将其放在绝对右上角但是接下来的形状（向右浮动）需要更高的z-index才能显示在顶部。

这一切听起来都很混乱，有人可以提出建议吗？

Answer 1

有多种方法可以达到这种效果。

一种方法是：

• 使用transform: skew更改右侧divs
的角度
• 使用相对定位将右侧divs向左滑动，使它们与左侧divs重叠
• 使用::after伪元素隐藏右侧divs
的右侧

工作示例：

＆＃13;

＆＃13;

body {
width: 200vw;
}

div {
float: left;
width: 400px;
height: 90px;
border-left: 3px solid rgb(255,255,255);
border-bottom: 3px solid rgb(255,255,255);
}

div:nth-of-type(3) {
clear: left;
}

div:nth-of-type(even) {
position: relative;
transform:skew(315deg);
}

div:nth-of-type(even)::after {
content: '';
display:block;
position: absolute;
top:0;
height:90px;
background-color:rgb(255,255,255);
transform:skew(-315deg);
}

div:nth-of-type(1) {
background-color:rgb(149,117,117);
}

div:nth-of-type(2) {
left: -67px;
background-color:rgb(117,149,117);
}

div:nth-of-type(3) {
background-color:rgb(117,133,149);
}

div:nth-of-type(4) {
left: -160px;
background-color:rgb(149,117,149);
}

div:nth-of-type(2)::after {
width:228px;
right:-60px;
}

div:nth-of-type(4)::after {
width:150px;
right:-75px;
}

div p {
height: 90px;
margin: 0;
padding: 0 24px;
line-height: 90px;
font-size: 33px;
color: rgb(255,255,255);
}

div:nth-of-type(even) p {
transform: skew(-315deg);
}

＆＃13;

<div><p>one</p></div>
<div><p>two</p></div>
<div><p>three</p></div>
<div><p>four</p></div>

＆＃13;

＆＃13;

＆＃13;