求助：实现复杂曲线边框Header的相关布局问题

目标效果 #

当前已实现代码 #

CSS #

.header {
  width: 100%;
  min-height: 500px;
  background-color: #2F4F4F;
  color: #FFF;
  overflow: hidden;
  position: relative;
  border-bottom-right-radius: 500px;
}

.header:before {
  content: '';
  background: rgb(47, 79, 79);
  background: linear-gradient(90deg, rgba(47, 79, 79, 1) 20%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.header__image__wrapper {
  padding-right: 1rem;
  border-bottom-right-radius: 500px;
}

.header__image {
  background: url('https://images.unsplash.com/photo-1662530787378-966cc9f87a8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80');
  background-position: right center;
  background-size: cover;
  width: 100%;
  height: 500px;
  border-bottom-right-radius: 500px;
}

HTML #

<header class="header">
  <div class="header__image__wrapper">
    <div class="header__image">
    </div>
  </div>
</header>

可用裁剪SVG路径 #

<svg width="1440" height="811" viewBox="0 0 1440 811" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M729.957 635.88C1307.52 647.087 1443.92 359.963 1439.92 0H0V811C2.6665 741.29 152.391 624.673 729.957 635.88Z" fill=""/>
<defs>
<linearGradient id="paint0_linear_558_16541" x1="1440" y1="374.355" x2="0.333518" y2="397.848" gradientUnits="userSpaceOnUse">
<stop stop-color="#11434E"/>
<stop offset="0.338542" stop-color="#0F5868"/>
<stop offset="1" stop-color="#16A1BD"/>
</linearGradient>
</defs>
</svg>

当前遇到的问题 #

• 左下角有超出div的蓝色部分向外突出
• 图片与右侧及底部容器间距不均匀，右下角仍能看到容器蓝色背景
• 右上角图片与蓝色背景需形成尖点，此为关键要求

解决方案 #

直接使用clip-path结合提供的SVG路径实现精准裁剪，替代圆角方案，同时调整背景和层级：

修改后的CSS #

.header {
  width: 100%;
  min-height: 500px;
  background: linear-gradient(90deg, #11434E 0%, #0F5868 33.85%, #16A1BD 100%);
  color: #FFF;
  position: relative;
  /* 使用SVG路径作为裁剪路径 */
  clip-path: path('M729.957 635.88C1307.52 647.087 1443.92 359.963 1439.92 0H0V811C2.6665 741.29 152.391 624.673 729.957 635.88Z');
}

.header__image {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%; /* 根据设计调整宽度占比 */
  height: 100%;
  background: url('https://images.unsplash.com/photo-1662530787378-966cc9f87a8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80');
  background-position: center;
  background-size: cover;
  /* 用相同SVG路径裁剪图片，确保和容器边缘完全贴合 */
  clip-path: path('M729.957 635.88C1307.52 647.087 1443.92 359.963 1439.92 0H0V811C2.6665 741.29 152.391 624.673 729.957 635.88Z');
  transform: translateX(1px); /* 修正边缘缝隙 */
}

修改后的HTML #

<header class="header">
  <div class="header__image"></div>
</header>

方案说明 #

1. 解决左下角突出问题：clip-path会严格按照SVG路径裁剪容器，不会出现圆角方案的溢出问题
2. 消除图片与容器间距：通过绝对定位让图片贴合容器右侧，同时用相同裁剪路径确保边缘完全匹配，transform: translateX(1px)可彻底消除可能的像素缝隙
3. 实现右上角尖点：SVG路径本身包含右上角的尖点设计，裁剪后自然形成该效果，无需额外调整

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