Как сделать дуговую границу у элемента?

Question

[Бобёр Нубяра]

Здравствуйте. Подскажите, пожалуйста, как сделать подобную границу у блока (закругление). Пробовал ковырять clip-path: url(#svgPath), но блок должен быть адаптивным. clip-path: ellipse(x x at x x) тоже вменяемых результатов не дал.

Понимаю, что, как минимум на данных скринах, можно просто зафигачить целиком всё фоном или наложить png-шку, но, думаю, должно быть какое-то более продвинутое решение.

Comments

[Froggyweb]

Border-radius или svg

[Ankhena]

border-radius и блок выходящий размерами за родителя. У родителя overflow:hidden.

https://jsfiddle.net/qb8Lamnu/

[Виолетта Морозова]

Ankhena, разве для вертикальных величин не надо использова единицу vh (вместо vw, как у вас)? vw - это viewport width, vh - это viewport height

[Ankhena]

Виолетта Морозова, я хотела квадрат, поэтому у меня высота равна ширине.
Если вам нужен прямоугольник пропорциональный размерам окна, используйте wv и vh.
Если нужна зависимость от высоты, используйте vh.

Никто не обязывает использовать vw только для ширины, а vh только для высоты. С чего бы это вдруг?

[Виолетта Морозова]

Ankhena, логично, в принципе, что не обязывают

[Ankhena]

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

[Виолетта Морозова]

Ankhena, это вы не для меня делали. Ошибочка. Я тут просто мимо проходила)

[Ankhena]

Виолетта Морозова, извините

Answer 1

[Александр Косицын]

может подойти css генератор градиента.
flatonika.ru/css-gradient-generator-onlajn
https://jsfiddle.net/brbpa0mr/1/

Answer 2

[Anton fon Faust]

radial-gradient плюс vw/vh (в зависимости от медиа-запроса)

Answer 3

[Владимир Бурцев]

Если говоришь об адаптивности и даёшь примеры где есть и горизонтальные и вертикальные решения, то тебе по любому прийдётся лепить в разные @media (...) {...} разные расчёты. Как минимум 2, а то и больше. Чем тебе не понравилось использование ellipse(...)" ? Что тебе мешает вставить в него calc(...) и подогнать нужные расчёты ? Для себя недавно выяснил что уже начинают понемногу поддерживаться переменные в css через element { --variable: ...}. Сейчас покрытие уже поднялось до 70%. В 2014 году её предложили в движке файрфокс, а с 2015 года поддержка появилась проактически у всех браузеров и только увеличивается.
Как вариант возможно придётся добавить scss.
Точное решение не предложу, извини. Я чуток в другом направлении кодю.