在HTML中制作曲线列表而无需使用画布

Question

我希望使用jQuery和CSS制作如下所示的弯曲列表。

如何实现？

我尝试了transform但没有成功。是否有任何可用于此的jQuery库？

- ghost...

Answer 1

您可以使用 css3 的 border-radius 属性来绘制曲线。如果您需要复杂的曲线，只需创建几个元素并将它们组合在一起即可。

我在互联网上找到了这个 jsfiddle。希望它能满足您的需求。jsfiddle

如果您需要更具体的内容，您可能需要明确您的问题。

最好的问候

- F. Müller

---

如何在曲线边界上添加数据，如上图所示。 - ghost...

创建HTML元素并将它们相对于曲线设置（曲线：position:relative，文本：position:absolute）。然后，您可以设置偏移量（top、left、bot、right）来调整位置。 - F. Müller

每次？文本的定位是相对于曲线的，因此您只需设置一次即可。父元素必须为position: relative，子元素必须为position: absolute。然后，偏移量将相对于父元素进行计算。 - F. Müller

当曲线移动时，即使其位置是绝对的，li或div的定位也需要改变。 - ghost...

曲线不会移动...但当我滚动曲线时...'b'应该取代'a'，'c'应该取代'b'等等....如何实现此目标。 - ghost...

Answer 2

你的另一个选择可以是将曲线元素与其他元素以绝对定位的方式放置

<div id="curves" class="width">
    <div id="curve1"></div>
    </div>
   <div id="one">a</div>




 #curves div {
    margin-top: 100px;
    width: 400px;
    height: 400px;
    border: 5px solid #999;
}


#curves.width div {
    border-color: red red  transparent transparent;
    /* top right bottom left */
}



#curve1 {
    border-radius:  100% 100% 100% 0;
}


#one {
    position: absolute;
    left: 300px;
    top: 105px;
}

如果您不想像Fiddle中那样硬编码绝对位置，您可以使用JavaScript/jQuery通过一些数学方程来查找绝对元素位置。

希望这能有所帮助。

- Alan M