如何在文档中实现连续的左-右-左下绿色曲线边框？

最优解决方案：使用SVG绘制连续曲线 #

SVG是实现这类自定义连续曲线的最佳选择，完全避免拼接问题，且路径、样式调整灵活精准。示例代码如下：

<svg width="100%" height="450" viewBox="0 0 1000 450" xmlns="http://www.w3.org/2000/svg">
  <!-- 绿色连续曲线，路径可按需调整 -->
  <path 
    d="M20,0 
       L20,150 
       Q500,300 980,150 
       L980,300 
       Q500,450 20,300 
       L20,450" 
    fill="none" 
    stroke="#23ce6bff" 
    stroke-width="5"
  />
</svg>

• 路径说明：
  • M20,0：设置起点为左侧顶部
  • L20,150：垂直向下画直线到第一个拐点
  • Q500,300 980,150：用二次贝塞尔曲线连接到右侧中间点，形成向右的弧度
  • L980,300：垂直向下画直线到右侧下方拐点
  • Q500,450 20,300：用二次贝塞尔曲线连接回左侧下方点，形成向左的弧度
  • L20,450：垂直向下画直线到终点
• 你可以修改Q后的控制点坐标调整曲线弯曲程度，通过stroke-width改变线条粗细，调整viewBox适配容器尺寸。

备选方案：单个Div+CSS伪元素（近似效果） #

如果不想用SVG，可尝试用单个div配合伪元素模拟，但精度略逊于SVG：

#curvedLine {
  width: 96.5%;
  height: 450px;
  position: relative;
  border-left: 5px solid #23ce6bff;
}

#curvedLine::before, #curvedLine::after {
  content: "";
  position: absolute;
  right: 0;
  width: 50%;
  height: 150px;
  border-right: 5px solid #23ce6bff;
}

#curvedLine::before {
  top: 150px;
  border-top-right-radius: 450px;
  border-bottom: 5px solid #23ce6bff;
}

#curvedLine::after {
  top: 300px;
  border-bottom-right-radius: 450px;
  border-top: 5px solid #23ce6bff;
}

<div id="curvedLine"></div>

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