Создание изогнутого списка в 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; 
} 

Если вы не хотите жестко закодировать абсолютное положение, как в Fiddle, вы будете найти абсолютное положение элемента делая некоторые математические уравнения с помощью Java-скрипт/Jquery

Надеется, что это может помочь