如何创建曲线及制作符合需求的响应式曲线边框？

需求是创建如图所示的曲线边框样式，尝试过相关教程未达预期，用SVG制作曲线在响应式场景下表现不佳，以下是纯CSS的响应式解决方案：

完整代码 #

HTML

<div class="box"></div>

CSS

body {
 background:pink;
}
.box {
  height:150px;
  margin:10px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* 曲线边框厚度 */
  --r:90px; /* 曲线半径 */
  --w:60%;  /* 曲线左侧占比（控制曲线左右位置） */
  --c:red;  /* 曲线边框颜色 */
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l)); /* 上下伪元素各占一半高度，减去边框厚度避免重叠 */
  border-style:solid;
  border-color:var(--c);
}
/* 下半部分曲线边框 */
.box:before {
   bottom:0;
   left:0;
   width:var(--w);
   border-width:0 var(--l) var(--l) 0; /* 仅保留右侧和底部边框 */
   border-radius:0 0 var(--r) 0; /* 右下角圆角形成曲线 */
}
/* 上半部分曲线边框 */
.box:after {
   top:0;
   right:calc(-1 * var(--l)); /* 向右偏移边框厚度，让上下边框完美衔接 */
   width:calc(100% - var(--w));
   border-width:var(--l) 0 0 var(--l); /* 仅保留顶部和左侧边框 */
   border-radius:var(--r) 0 0 0; /* 左上角圆角形成曲线 */
}

关键说明 #

• 所有样式参数通过CSS变量定义，直接修改--l/--r/--w/--c即可快速调整边框效果
• 利用伪元素拆分上下两部分曲线，通过百分比宽度和calc计算实现完全响应式，适配不同屏幕尺寸
• 通过调整伪元素位置和尺寸，确保曲线边框衔接无间隙，避免SVG在缩放时出现的变形问题

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