Javascript 如何创建曲线css div？

我使用的是css，仅div。我试图画出这些类型的线：

.line{
宽度：1px；
高度：100px；
背景色：黑色；
位置：绝对位置；
边界半径：50%/100px 100px 0；
}
#第1行{
顶部：100px；
左：50px；
}
#第2行{
顶部：220px；
左：150px；
高度：115px；
变换：旋转（120度）；
-webkit变换：旋转（120度）；
-ms变换：旋转（120度）；
}

---

您可以使用SVG实现您想要的目标。 请参阅下面的代码

请在此处阅读更多->

---

您可以使用SVG实现您想要的目标。 请参阅下面的代码

请在此处阅读更多->

不能创建具有边界半径的曲线。用画布代替。@SergioBelevskij谢谢分享，这很接近，但你能帮我调整css吗？不过你可以创建一些相切曲线。看。@Teemu问题是我不能同时处理两行。我正在尝试使用一条直线或一个div来制作一条完整的曲线。您无法创建具有边界半径的曲线。用画布代替。@SergioBelevskij谢谢分享，这很接近，但你能帮我调整css吗？不过你可以创建一些相切曲线。看。@Teemu问题是我不能同时处理两行。我尝试使用1条直线或1个div来制作1条完整的曲线。我不允许使用svg，这就是为什么我提到我使用css，div@user3508182检查编辑的解决方案是否可以在每个div上使用一行？我在代码中使用2行的原因是，如果您阅读了答案，那么在代码中使用2行是为了相应地创建单独的行，如l1表示左曲线，第2行表示第二条曲线，第3行表示第三条曲线。是的，你可以。只需在之前和之后使用伪元素，而不是divs

line1

和

line2

我不允许使用svg，这就是我提到我使用css的原因，div@user3508182检查编辑的解决方案是否可以在每个div上使用一行？我在代码中使用2行的原因是，如果您阅读了答案，那么在代码中使用2行是为了相应地创建单独的行，如l1表示左曲线，第2行表示第二条曲线，第3行表示第三条曲线。是的，你可以。只需在之前和之后使用伪元素

，而不是divs
line1
和
line2