CSS实现带圆角渐变背景的可点击L形div方案咨询

直接用clip-path实现就能一次性解决所有需求，不需要额外嵌套HTML结构，也不用依赖SVG。

方案优势 #

• 支持自定义内外圆角，参数调整灵活
• 浏览器原生限制点击区域，只有L形实际覆盖的范围会响应交互，缺角空白区不会触发任何事件
• 完美支持纯色、渐变、背景图等任意背景效果，渐变可以跨整个L形连贯显示
• 无硬编码固定尺寸，可随容器自适应缩放

实现代码 #

.l-shape {
  /* 可按需自定义以下参数 */
  --arm-width: 60px; /* L形横/竖臂的宽度 */
  --outer-radius: 12px; /* 外侧圆角大小 */
  --inner-radius: 8px; /* 内侧拐角圆角大小 */
  width: 400px;
  height: 250px;
  /* 背景可随意替换，这里用渐变做示例 */
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  /* 核心：通过路径裁剪出带圆角的L形，利用非零环绕规则挖去右上角缺角 */
  clip-path: path(
    'M0 0\
    L var(--arm-width) 0\
    L var(--arm-width) calc(100% - var(--arm-width))\
    L 100% calc(100% - var(--arm-width))\
    L 100% calc(100% - var(--outer-radius))\
    Q 100% 100% calc(100% - var(--outer-radius)) 100%\
    L var(--outer-radius) 100%\
    Q 0 100% 0 calc(100% - var(--outer-radius))\
    L 0 0\
    M calc(var(--arm-width) + var(--inner-radius)) 0\
    Q var(--arm-width) 0 var(--arm-width) var(--inner-radius)\
    L var(--arm-width) calc(100% - var(--arm-width) - var(--inner-radius))\
    Q var(--arm-width) calc(100% - var(--arm-width)) calc(var(--arm-width) + var(--inner-radius)) calc(100% - var(--arm-width))\
    L 100% calc(100% - var(--arm-width))\
    L 100% 0\
    Z'
  );
}

注：上述路径实现的是左下角带外侧圆角、L形内侧拐角带圆角的标准L轮廓，如果需要调整L的朝向、臂宽比例，只需要修改path坐标和CSS变量即可。

使用示例 #

<div class="l-shape" onclick="alert('只有点击L形区域才会触发')">
  <p style="padding: 16px; margin: 0; color: #fff;">
    内容直接放在div内部即可，超出L形范围的内容会被自动裁剪，缺角区域不会响应点击。
  </p>
</div>

原有边框拼接方案的缺陷 #

你找到的公开示例是用多段背景拼接边框、伪元素遮挡空白实现的，存在两个天生问题：

• 伪元素遮挡的区域只是视觉上透明，实际仍属于div的响应范围，点击缺角位置还是会触发div上绑定的事件
• 拼接的边框无法实现连贯的内侧圆角，渐变背景也会被分段切割，没法实现跨L形的连贯渐变效果

目前主流Chrome、Firefox、Safari以及移动端浏览器对clip-path: path()的支持度已经覆盖95%以上的用户，完全可以用于生产环境。

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