Как нарисовать нижнюю часть круга?

Question

[Programmir]

Нужно нарисовать так, что нижняя часть круга немного вылезает. Нижяя часть круга занимает всю ширину экрана. И высота от крайних точек до центра, где нижняя точка - 30px. Пробовал задать border-bottom-left-radius и border-bottom-right-radius: 50% 30px, но дуга окружности не выходит, а вначале более сильный уклон, а потом меньше. А как нарисовать нижнюю часть круга?

Answer 1

[Ankhena]

Радиальные градиенты css.yoksel.ru/radial-gradients

Comments

[Programmir]

а при чем тут градиенты?

[Ankhena]

Programmir, ну нет, так нет )))
Вы бы лучше картинку приложили, чтобы было понятно кто куда выпирает и что такое "высота от крайних точек до центра", если речь не о радиусе.
Например, (параметры дуги могут быть разными, в примере высота скругления не должна была изменяться, а радиус меняется)

[Programmir]

Да, мне нужен был примерно такой результат

[Ankhena]

Programmir, альтернатива svg

[Programmir]

Ankhena, вот только на краях из-за градиентов зубчики появляются)

[Ankhena]

Programmir, размойте его чуть чуть, будет гладкий.

[Programmir]

Ankhena, нижний край там белый задан, а как его задать прозрачным, потому что под ним картинка будет? Я задал transparent, но там берется цвет, который в конце задан.

[Ankhena]

Programmir, код в песочницу, картинку-образец сюда.
Через 3 часа приду - посмотрю, что там.

[Programmir]

Ankhena, https://jsfiddle.net/hv682a7k/
мне нужно, чтобы синяя часть внизу была прозрачной, под ней картинка будет

[Ankhena]

Programmir, так чтоль: https://jsfiddle.net/4t7xpLa9/ ?
Возможно, будет удобнее радиальный градиент для псевдо задавать, а не для всего блока.

[Programmir]

Спасибо большое. Это то, что я хотел)

[Ankhena]

Programmir, в следующий раз прикладывайте картинку. Ответ был бы значительно быстрее и не пришлось бы гадать.