你可以在css中创建非对称形状

Question

我正在寻找创建4个不同形状的内容区域，将响应工作。这里有一个例子形象 -

是否有可能创造4个格容器这样无需使用SVG的？我知道你可以在容器内部创建一个三角形形状，并将其定位在绝对右上方，但是接下来的形状（float float right）需要更高的Z-index才能出现在顶部。

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

Answer 1

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

一种方法是：

• 使用transform: skew改变右手的角度divs
• 使用相对定位到右手divs向左滑动，所以它们重叠的左手divs
• 使用::after伪元素以隐藏在右侧的右侧divs

工作实例：

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

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