我希望使用jQuery和CSS制作如下所示的弯曲列表。
如何实现?
我尝试了transform但没有成功。是否有任何可用于此的jQuery库?
如何实现?
我尝试了transform但没有成功。是否有任何可用于此的jQuery库?
您可以使用 css3
的 border-radius
属性来绘制曲线。如果您需要复杂的曲线,只需创建几个元素并将它们组合在一起即可。
我在互联网上找到了这个 jsfiddle。希望它能满足您的需求。jsfiddle
如果您需要更具体的内容,您可能需要明确您的问题。
最好的问候
你的另一个选择可以是将曲线元素与其他元素以绝对定位的方式放置
<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通过一些数学方程来查找绝对元素位置。
希望这能有所帮助。