如何用CSS Clip Path复刻带弧形边缘的UI界面？

CSS的clip-path: polygon()只能生成直线边缘的形状，无法实现弧形，你可以用以下几种方法复刻目标UI的弧形边缘：

方法1：伪元素 + border-radius #

通过创建伪元素，利用border-radius生成弧形，覆盖容器的边缘区域，模拟出弧形效果。适合简单的单/多弧形边缘场景：

.target-element {
  position: relative;
  width: 320px;
  height: 240px;
  background: #2563eb;
  overflow: hidden;
}

/* 底部左右弧形示例 */
.target-element::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  /* 背景色与页面背景一致 */
  background: #ffffff;
  border-radius: 50% 50% 0 0;
  /* 只显示上半部分弧形 */
  transform: translateY(50%);
}

方法2：CSS Mask 属性 #

利用CSS的mask属性，结合径向渐变创建弧形遮罩，让容器边缘呈现弧形。这种方法无需额外元素，代码更简洁：

.target-element {
  width: 320px;
  height: 240px;
  background: #2563eb;
  /* 左下角和右下角各创建一个20px半径的弧形透明区域 */
  -webkit-mask-image: radial-gradient(circle at bottom left, transparent 20px, black 20px),
                      radial-gradient(circle at bottom right, transparent 20px, black 20px);
  -webkit-mask-size: 50% 100%;
  -webkit-mask-position: left bottom, right bottom;
  -webkit-mask-repeat: no-repeat;
  /* 兼容标准写法 */
  mask-image: radial-gradient(circle at bottom left, transparent 20px, black 20px),
              radial-gradient(circle at bottom right, transparent 20px, black 20px);
  mask-size: 50% 100%;
  mask-position: left bottom, right bottom;
  mask-repeat: no-repeat;
}

方法3：SVG Clip Path #

使用SVG的<clipPath>定义带弧形的路径，再在CSS中引用该路径。适合复杂的多弧形/自定义曲线场景：

<!-- 隐藏SVG画布，仅提供clipPath -->
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="arc-clip">
    <!-- 绘制带左右底部弧形的路径，20px为弧形半径 -->
    <path d="M20,0 L300,0 L300,200 
             A20,20 0 0 1 280,220 
             L40,220 
             A20,20 0 0 1 20,200 Z" />
  </clipPath>
</svg>

.target-element {
  width: 320px;
  height: 240px;
  background: #2563eb;
  clip-path: url(#arc-clip);
}

以上三种方法都能实现你需要的弧形边缘效果，可以根据UI的复杂程度选择合适的方案。

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