如何用CSS实现图片中的形状背景？现有方案无效求解决

AI 小北

2026-5-14

嘿，我懂你现在的困扰——想用CSS做出特定形状的背景，但当前的border-radius写法没达到预期效果对吧？别着急，咱们来一步步调整，找到合适的方案！

问题分析

你当前的代码用了border-radius: 0px 0px 20px 110px，这个写法是把四个角的圆角按左上、右上、右下、左下的顺序设置，但可能因为没有区分圆角的水平和垂直半径，导致形状不符合预期。

方案一：精准控制border-radius

如果你的目标是“右上角、左上角为直角，右下角小圆角，左下角大圆弧角”，可以分开设置每个角的水平与垂直半径，让左下角的圆角垂直方向完全贴合元素高度，这样会形成更自然的弧形：

.shape {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  /* 单独设置每个角的圆角：水平半径 / 垂直半径 */
  border-bottom-right-radius: 20px; /* 右下圆角，水平垂直都是20px */
  border-bottom-left-radius: 110px 100px; /* 左下圆角：水平110px，垂直100px（和元素高度一致） */
}

<div class="shape"></div>

方案二：用clip-path实现复杂形状

如果你的目标形状更特殊（比如带有切角或者非对称的弧形），border-radius可能满足不了，这时候可以用clip-path来精准绘制路径：

.shape {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  /* 自定义路径，可根据需求调整数值 */
  clip-path: polygon(
    100% 0,                /* 右上角点 */
    100% calc(100% - 20px),/* 右下角上方20px的点 */
    calc(100% - 20px) 100%,/* 右下角左移20px的点 */
    110px 100%,            /* 底部左移110px的点 */
    0 calc(100% - 110px),  /* 左侧底部上移110px的点 */
    0 0                    /* 左上角点 */
  );
}