在沒有畫布的情況下在html中製作曲線列表

Question

我想使用jquery和css製作如下所示的曲線列表。

怎麼做。

我嘗試了轉換，但沒有奏效。如何實現或任何jQuery庫可用於此。

Answer 1

您可以使用css3border-radius屬性繪製曲線。如果您想要複雜的曲線，只需創建一些元素並將它們添加到一起。

我在網上找到了這個jsfiddle。它希望它能滿足您的需求。 jsfiddle

如果你想要更具體的東西，你可能需要指定你的問題。

問候

Answer 2

您的其他選項可以 Curved element with other elements as positioned in an absolute way

<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; 
} 

如果你不想硬編碼的絕對位置的小提琴，你會發現絕對元素位置通過使用Java腳本做一些數學公式/ jQuery的

希望能幫助