html - 如何使用div绘制曲线？

Question

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

Answer 1

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

下面是关于如何使用两个 cubic bezier curve (c) commands 创建形状的示例片段.三次贝塞尔曲线命令一共带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>