如何不使用absolute position实现左侧U形弯曲灰色背景效果

核心思路通过背景层实现U形效果，不引入脱离文档流的定位属性，上层元素可直接按正常流排布，无布局冲突。

方案1：CSS渐变实现（无额外DOM元素） #

仅通过渐变组合实现效果，无需引入额外资源：

.u-shape-container {
  width: 100%;
  min-height: 400px;
  /* 组合线性渐变+径向渐变拼接U形 */
  background: 
    /* 左侧直边灰色区域 */
    linear-gradient(to right, #f0f0f0 25%, transparent 25%) top left / 100% 70% no-repeat,
    /* 底部U形弯曲拼接 */
    radial-gradient(circle at 25% 70%, #f0f0f0 25%, transparent 25.1%) bottom left / 50% 60% no-repeat,
    radial-gradient(circle at 25% 70%, transparent 25%, #f0f0f0 25.1%) bottom left / 100% 60% no-repeat;
}

可通过修改渐变参数调整U形的宽度、高度、弯曲弧度。

方案2：内联SVG背景（曲率精度更高） #

适合对曲线精度要求高的场景，直接将SVG内联到背景属性中：

.u-shape-container {
  width: 100%;
  min-height: 400px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cpath d='M0,0 L25%,0 L25%,70% A30,30 0 0,0 55%,100% L0,100 Z' fill='%23f0f0f0' /%3E%3C/svg%3E") left top / 100% 100% no-repeat;
}

可修改path路径参数自定义U形的弯曲形态，适配各类设计需求。

使用示例 #

容器内的按钮、文本等元素直接正常写即可，无需特殊处理：

<div class="u-shape-container">
  <button>功能按钮1</button>
  <button>功能按钮2</button>
  <p>其他文本内容</p>
</div>

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