Как сделать такие линии?

Question

[Jerryforce]

Возможно ли?

Comments

[Сергей delphinpro]

1. Четыре абсолютно позиционированных блока с border-radius. У этого свойства для каждого угла можно задать пару значений - скругление по горизонтали и вертикали, таким образом можно будет сделать почти любой эллипс.
2-3. Просто нарисовать эти линии на canvas или в svg

[Froggyweb]

Сверстать нынче можно наверное что угодно. вопрос зачем. Вы эти линии собрались анимировать? или есть другой потаенный смысл?

[twobomb]

Кривые

Answer 1

[Юрий Есин]

Либо отрисовать канвасом кривую Безье, как указали выше, либо только средствами CSS3, применить трансформацию к блоку с абсолютным позиционированием и скругленным бордером. В обоих случаях линии залить линейным градиентом. Получится примерно такой эффект как на картинке.

Answer 2

[Legaal]

Кривая Безье