Как организовать блок с внутренней дугой?

Question

[nepster-web]

Необходимо реализовать div блок с внутренней дугой, примерно вот такой:



Я смог это сгенерировать топорно тыкав на точки с помощью сервиса cssplant.com/clip-path-generator. Однако там точки на глаз не ровные.

К сожалению поиск не увенчался особым успехом, кто сталкивался с такими задачами, подскажите пожалуйста решение.

Answer 1

[Санек]

можно вручную сделать: tympanus.net/codrops/css_reference/clip-path вот мануалка!

Answer 2

[Андрей Федоров]

codepen.io/aliencash/pen/GoyZrG
Поиграйте с параметрами сами...

Comments

[nepster-web]

к сожалению такая штука не подойдет, так как нужно организовать дугу именно у div блока. Изображение не обязательно может там присутствовать, например просто заливка цвета.

[Андрей Федоров]

nepster09: Попробуйте ДЕЙСТВИТЕЛЬНО разобраться что к чему в моем коде.
codepen.io/aliencash/pen/BjJKrb

[nepster-web]

Андрей Федоров: может я не так объяснил, но я имел ввиду что нельзя будет применить что-то такое:
codepen.io/anon/pen/ZQvWjO

[Андрей Федоров]

nepster09: Вам нужно тень дать скругленной части?

[nepster-web]

Андрей Федоров: там на самом деле много задач внутри и не один элемент и оно все должно под overflow обрезаться. Тоесть именно к div нужна дуга.

[Андрей Федоров]

nepster09: Ну тогда я предлагаю написать на php, js, c и т.п. на чем умеете программу, которая будет рассчитывать по функции, в вашем примере эллипса, координаты для полигона с нужной дискретностью.