使用Tailwind CSS复刻左上角无缝弧形半圆：实现遇阻求助

完全可以实现你要的效果，当前代码的问题在于圆弧端点未对齐容器边缘，无法形成“无缝贴合左上角”的视觉效果。以下是具体调整思路和修改后的代码：

核心思路 #

要做出贴合左上角的无缝曲线，需让每一层圆弧的两个端点分别落在容器的左边缘（x=0）和上边缘（y=0），同时使用同心圆弧保证多层曲线间距均匀，形成连贯的角落装饰。

修改后的代码 #

<div className="absolute top-0 left-0 w-32 h-32 z-[-1]">
  <!-- 无需旋转SVG，直接调整圆弧端点到容器边缘 -->
  <svg className="absolute w-full h-full" viewBox="0 0 100 100">
    <!-- 外层蓝色圆弧：端点在左边缘(0,40)和上边缘(40,0)，半径40 -->
    <path d="M0,40 A40,40 0 0,1 40,0" fill="transparent" stroke="blue" strokeWidth="8" />
    <!-- 内层金色圆弧：端点在左边缘(0,30)和上边缘(30,0)，半径30 -->
    <path d="M0,30 A30,30 0 0,1 30,0" fill="transparent" stroke="goldenrod" strokeWidth="8" />
  </svg>
</div>

代码说明 #

1. 移除rotate-90类：直接通过调整path端点位置，让圆弧自然贴合左上角，避免旋转带来的定位偏差。
2. 圆弧参数调整：
   • M0,40：设置圆弧起点在容器左边缘的(0,40)位置；
   • A40,40 0 0,1 40,0：绘制半径为40的圆弧，终点落在容器上边缘的(40,0)位置，0 0,1参数保证圆弧是贴合左上角的顺时针小弧度；
3. 多层圆弧间距控制：内层圆弧半径比外层小10，端点位置同步内移10，保证两层曲线间距均匀，视觉上无缝连贯。

扩展优化 #

如果需要更细腻的效果，还可以：

• 调整strokeWidth和半径差值，让曲线间距更匹配设计需求；
• 给圆弧添加stroke-linecap="round"，让端点与容器边缘的衔接更平滑；
• 使用单个path结合stroke-dasharray绘制多层曲线，但独立path的方式更易维护。

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