如何使用div绘制曲线？

Question

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

Answer 1

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

以下是有关如何使用几个cubic bezier curve (c) commands创建形状的示例代码段。三次贝塞尔曲线命令总共需要3组参数，前两组代表曲线初始点和终点的控制点坐标，最后一组代表曲线实际终点的坐标。 / p>

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

.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>