Как сделать эту крутую штуку на CSS?

Question

[frontend-noob]

Кривая фиолетовая линия, возможно ли реализовать на CSS ?

Comments

[Алекс]

пока нет)) используйте canvas

Answer 1

[Ivan Bogachev]

На чистом CSS такое сделать не получится. Проще всего использовать волну (верхнюю ее часть) в виде SVG картинки (пример). Надеюсь проблем с тем, чтобы нарисовать ее одной кривой, не возникнет.

Comments

[Иван]

А как вообще научиться такое делать в svg? Это самому ручками писать надо,или же в редакторе каком-то?

[Ivan Bogachev]

Иван: В любом векторном графическом редакторе.

Answer 2

[Boris Köln]

Проще сделать на svg.
Если же надо на чистом css - можно поверх фиолетового прямоугольника сделать большой белый div с rotate и border-radius.