如何为区块右上角创建平滑的内凹曲线？

你当前的SVG mask路径使用的是生硬的贝塞尔曲线参数，导致内凹部分过渡不够自然。我们可以通过优化SVG路径，改用**圆弧命令（A）**来实现更平滑的内凹效果，或者调整贝塞尔曲线的控制点让曲线更流畅。

修改后的完整代码 #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.curved-block {
  width: 300px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  padding: 20px; /* 调整内边距避免内容被遮挡 */
}

.curved-block::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  /* 使用圆弧路径的SVG mask */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 h20 A20 20 0 0 1 40 20 v20 H0 V0 Z' fill='%23000000'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 h20 A20 20 0 0 1 40 20 v20 H0 V0 Z' fill='%23000000'/%3E%3C/svg%3E");
  mask-size: cover;
  -webkit-mask-size: cover;
}

.icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  background-color: #0056b3;
  border-radius: 50%;
  color: white;
  z-index: 2;
}

<div class="curved-block">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <span class="icon">+</span>
</div>

关键调整说明 #

1. 改用SVG圆弧命令：
   原贝塞尔曲线（c命令）控制点设置不合理，导致曲线生硬。替换为A圆弧命令后，能生成均匀平滑的曲线，完美匹配目标内凹效果：
   • h20：从左上角(0,0)向右移动20px，确定圆弧起始点
   • A20 20 0 0 1 40 20：绘制半径为20的四分之一圆弧，从(20,0)到(40,20)，形成自然内凹弧度
2. 自定义调整选项：
   • 若要加深内凹程度，可增大圆弧半径（如A25 25），同时对应调整h20为h15以匹配半径
   • 若要让曲线更平缓，可减小圆弧半径（如A15 15），同时调整h25
3. 优化排版细节：
   原代码padding:5px过小，内容易被右上角图标遮挡，改为padding:20px让排版更合理。

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