CSS 实现卡片圆角和折耳圆角

CSS 实现卡片整体圆角 + 右下折耳 + 折耳缺口处圆角。

项目效果预览：

前言：

也许你会想圆角很好实现啊，用border-radius就可以了，但如果还有加一个缺角呢，并且缺角也得两端也得实现圆角呢，这个问题就变得没那么简单了，受技术限制下文只提供了博主的实现方法，如您有更好的方法或不同的解决办法亦或者有其它问题欢迎在下方留言讨论。

解决过程：

第一次解决失败，我采用了border-radius + clip-path结合实现，使用border-radius实现四边的圆角，clip-path斜切实现了缺角，一切都按计划走的很美好，效果也不错，但缺角两端的圆角却难倒了我，尝试了各种方法均无法得到有效解决或最终效果不理想，用了AI均失败了，效果和代码如下。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1</title>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: #000;
    margin: 100px auto;
    border-radius: 10px;
    -webkit-clip-path: polygon(100% 1%, 100% 73%, 76% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 1%, 100% 73%, 76% 100%, 0 100%, 0 0);
  }
</style>

第二次完美解决，在几经折腾无果后这里考虑使用SVG作背景图，总所周知SVG总是充满奇妙和可能的，使用SVG替代整体的背景和圆角 + 缺角问题得到了完美的解决。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1</title>
  </head>
  <body>
    <div class="box">
      <svg class="item-bg" viewBox="0 0 285 259" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path
          class="item-bg-shape"
          d="M 18,0 H 267 A 18,18 0 0,1 285,18 V 182.27 A 18,18 0 0,1 279.73,195 L 222.072,255 A 18,18 0 0,1 209.34,259 H 18 A 18,18 0 0,1 0,241 V 18 A 18,18 0 0,1 18,0 Z"
        />
        <line class="item-bg-fold" x1="279.73" y1="195" x2="222.072" y2="255" />
      </svg>
    </div>
  </body>
</html>

<style>
  .box {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  .item-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .item-bg-shape {
    fill: #000;
    transition: fill .3s;
  }
  .item-bg-fold {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 1;
  }
</style>