如何实现左右DIV互相交错的异形扭曲布局？

要实现如图所示的左右两个DIV反向扭曲效果（右侧DIV顶部延伸至左侧区域，左侧DIV底部延伸至右侧区域），可以通过CSS的clip-path属性配合定位来完成，以下是具体实现方案：

基础HTML结构 #

<div class="container">
  <div class="right">
     <img src="/images/image1.jpg" alt="image" />
  </div>
  <div class="left">
    <h1 class="headings">THE LEADER IN INTERACTIVE VR</h1>
    <p class="text">Founded in 2011, Loop Studios has been producing world class Virtual Reality projects for some of the best companies around the globe. Our award winning creations have transformed businesses through digital experiences that bind to their brand.</p>
  </div>
</div>

CSS实现代码 #

.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 600px;
  overflow: hidden;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  /* 裁剪右侧DIV顶部向左延伸的异形 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  z-index: 1;
}

.right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background-color: #fff;
  padding: 60px 80px;
  box-sizing: border-box;
  /* 裁剪左侧DIV底部向右延伸的异形 */
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.headings {
  font-size: 2.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.text {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
}

关键说明 #

• clip-path：通过多边形坐标定义元素的显示区域，polygon(x1 y1, x2 y2, x3 y3, x4 y4)中的数值可按需调整，实现不同的扭曲延伸效果
• 定位与层级：用position: absolute让两个DIV重叠，z-index控制左侧内容层显示在图片层上方
• 图片适配：object-fit: cover保证图片填满容器且不变形

内容的提问来源于stack exchange，提问作者coding beast