Как сделать скругления у блока сверху-снизу, не border-radius?

Question

[vistar]

Вот так нужно:


У некоторых блоков снизу, у остальных сверху.

Comments

[Ankhena]

Вариантов много
1. Радиальные градиенты https://jsfiddle.net/Ankhena/0qxLo3us/1/
2. clip-path
3. псевдо-элементы с border-radius и overflow родителю

Answer 1

[Максим]

На SVG можно

Comments

[vistar]

Спасибо, опробую.
Этот svg как background ляжет хорошо?

[Максим]

vistar, очевидно нет...там маска а это не будет работать в css - скорее всего надо mask делать именно в css на блок (div) вот здесь я задал этот вопрос => подсматривай иногда https://ru.stackoverflow.com/q/1245922/308951

[vistar]

Много Чего, спасибо, добрый человек, смотрю, уже есть решения там!

[Максим]

vistar, я отметил решением - так как работает это ... повтори точно как там написал автор ответа ..и заработает у тебя

[vistar]

С img в качестве фоне не совсем адаптивно получается...

[Максим]

vistar, не обманывайте

[Максим]

vistar,

Answer 2

[Vladislav]

Свойство clip-path: ellipse
https://bennettfeely.com/clippy/

Comments

[vistar]

Сектор круга как сделать?

[Vladislav]

vistar, clip-path: circle по ссылке перейди и там можешь настроить как тебе надо круг и эллипс

[vistar]

Vladislav, по ссылке только фигуру целиком, сектор от 60 до 140 градусов не сделать...

[Vladislav]

vistar, дак ты просто возьми фигуры целиком и пододвинь к верху, родителю задай overflow: hidden самой фигуре position:absolute top: 0 попробуй такой вариант, короче суть двигай фигуры за пределы родителя на половину и родителю overflow hidden

[vistar]

Vladislav, clip-path: circle(3000px at 50% 3000px);
без всяких дополнительных танцев обошлось. :)
И для разных по высоте блоков тоже работает, по крайней мере нет блоков с высотой 3000.