CSS自定义带圆角多边形形状实现问题求助

clip-path: polygon() 和 border-radius 天生不兼容——clip-path是直接把元素裁成硬边多边形，border-radius的圆角会被这个裁剪完全切掉，所以看不到效果。下面给你几个可行的解决方案：

方案1：用CSS path() 定义带圆角的裁剪路径 #

直接用clip-path: path()写带圆角的路径，替代polygon，能直接画出带圆角的目标形状：

.custom-shape {
  /* 路径给四个角都加了10px圆角，右下角切角也带圆角，可根据需求调整数值 */
  clip-path: path("M10,0 Lcalc(100% - 10),0 
                   Lcalc(100% - 10),10 
                   L100%,10 
                   L100%,calc(100% - 10) 
                   C100%,100% 75%,100% 75%,calc(100% - 10) 
                   L10,calc(100% - 10) 
                   L10,10 Z");
  background: #your-color;
}

方案2：伪元素+overflow:hidden 替代clip-path #

不用clip-path，用伪元素模拟切角，同时保留border-radius的效果：

.custom-shape {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #your-color;
  /* 按需设置元素宽高 */
  width: 300px;
  height: 200px;
}

.custom-shape::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  /* 切角宽度对应原polygon的75%位置，即元素宽度的25% */
  width: 25%;
  height: 100%;
  /* 背景色和页面背景一致，模拟切角效果 */
  background: #page-background-color;
  /* 调整倾斜角度匹配原切角 */
  transform: skewX(45deg);
  transform-origin: bottom right;
}

方案3：SVG clipPath 实现带圆角的形状 #

如果想用SVG，直接在SVG里定义带圆角的裁剪路径，再给元素应用：

<!-- 放在页面中，宽高设为0不占空间 -->
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="roundedClip" clipPathUnits="objectBoundingBox">
    <!-- 0.01对应1%比例，可根据元素大小调整圆角数值 -->
    <path d="M0.01,0 H0.99 
             V0.01 H1 
             V0.99 C0.99,1 0.75,1 0.75,0.99 
             H0.01 V0.01 Z" />
  </clipPath>
</svg>

对应的CSS：

.custom-shape {
  clip-path: url(#roundedClip);
  background: #your-color;
}

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