如何使用 div 绘制曲线？答案

【问题标题】：How to draw a curve by using div?如何使用 div 绘制曲线？
【发布时间】：2015-09-10 10:11:07
【问题描述】：

我需要使用 CSS 绘制两条曲线。我尝试组装一些divs，使用CSS border-radius 来绘制曲面面板。但结果很糟糕。有更好的算法吗？

【问题讨论】：

你能告诉我们你尝试了什么吗？
你能把它创建为图像吗？
您可以查看this thread，但请不要为此使用 CSS。使用 SVG 完成双曲线要容易很多倍。

【解决方案1】：

正如我之前在 cmets 中提到的，请不要使用 CSS 来实现复杂的曲线和形状。虽然仍然可以使用 CSS 来实现它们（使用 this thread 中所示的 transform + 伪元素或在 this thread 中使用 box-shadows），但过程非常复杂，您无法获得太多控制在形状，曲率等方面。另一方面，SVG 是为此类图形设计的，它也可以毫无问题地缩放。

以下是关于如何使用一对cubic bezier curve (c) commands 创建形状的示例 sn-p。三次贝塞尔曲线命令一共有 3 组参数，其中前两组表示曲线起点和终点的控制点坐标，最后一组表示曲线实际终点的坐标。

您可以通过修改控制点来控制曲率。

.container {
  position: relative;
  width: 300px;
}
.container > div {
  display: inline-block;
  box-sizing: border-box;
}
.items {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  border: 1px solid #BBB;
  overflow: hidden;
}
.shape {
  position: absolute;
  top: 50%;
  right: 0%;
  height: 100px;
  width: 40px;
  transform: translateX(100%) translateY(-50%);
}
path {
  stroke: #AAA;
  fill: #DDD;
}
line {
  stroke: #444;
}

<div class="container">
  <div class="items">
  </div>
  <div class="shape">
    <svg viewBox='0 0 50 100' preserveAspectRatio='none'>
      <path d='M0,0 
               c10,15 40,15 48,35 
               v30 
               c-8,20 -38,20 -48,35'></path>
      <line x1='15' y1='45' x2='30' y2='45' />
      <line x1='15' y1='50' x2='30' y2='50' />
      <line x1='15' y1='55' x2='30' y2='55' />
    </svg>
  </div>
</div>

【讨论】：