如何使用SVG实现登录页面的垂直曲线（Vertical Curve）UI设计？

核心思路 #

用SVG的<path>元素绘制垂直方向的贝塞尔曲线，通过调整路径起点、控制点和终点，配合CSS定位让SVG贴合容器边缘，就能实现图中的侧边垂直曲线效果。

具体操作步骤&代码示例 #

以下是左侧带垂直曲线的登录页面实现代码：

HTML结构

<div class="login-container">
  <!-- 带曲线的侧边栏 -->
  <div class="sidebar">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <!-- 垂直曲线路径 -->
      <path d="M0,0 C20,0 20,100 0,100" fill="#6366f1" />
    </svg>
    <div class="sidebar-content">
      <h2>欢迎登录</h2>
      <p>管理你的账户</p>
    </div>
  </div>
  <!-- 登录表单 -->
  <div class="login-form">
    <form>
      <input type="email" placeholder="邮箱" />
      <input type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  </div>
</div>

CSS样式

.login-container {
  display: flex;
  width: 800px;
  height: 500px;
  margin: 2rem auto;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

.sidebar {
  position: relative;
  width: 35%;
}

/* 让SVG铺满侧边栏 */
.sidebar svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 侧边栏内容（层级高于SVG） */
.sidebar-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 2rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form {
  width: 65%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form input {
  margin-bottom: 1.2rem;
  padding: 0.9rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 1rem;
}

.login-form button {
  padding: 0.9rem;
  background-color: #6366f1;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

关键参数说明 #

1. SVG路径（path的d属性）

   • M0,0：路径起点，对应SVG viewBox的左上角
   • C20,0 20,100 0,100：三次贝塞尔曲线定义，其中：
     • 20,0：第一个控制点（水平向右20单位，垂直0）
     • 20,100：第二个控制点（水平向右20单位，垂直100）
     • 0,100：路径终点，对应SVG viewBox的左下角
   • 调整控制点的数值（比如把20改成30），可以改变曲线的弧度大小。如果需要右侧的垂直曲线，只需把路径改为M100,0 C80,0 80,100 100,100，并把SVG放在右侧容器中。

2. SVG属性

   • viewBox="0 0 100 100"：定义SVG的坐标系，方便按比例绘制路径，不受实际容器尺寸影响
   • preserveAspectRatio="none"：让SVG自适应拉伸填充容器，避免曲线变形

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