如何使用div绘制曲线？

debugcn 发表于 Dev

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

在此处输入图片说明

哈利

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

以下是有关如何使用几个三次贝塞尔曲线（c）命令创建形状的示例代码段。三次贝塞尔曲线命令总共使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。