Можно ли с помощью CSS сделать сложный border-radius?

Question

[weranda]

Приветствую

Если есть только один блок, то можно ли его стилизовать с помощью CSS без использования фонового изображения в следующем виде?



Пробовал border-radius 1/3 или 3/1, но работает только для одной стороны и то не до нужной степени готовности.

Answer 1

[GreatRash]

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Comments

[weranda]

Пробовал уже. Обратите внимание на то, что все стороны выпуклые, а в вашем примере только две стороны (верх и низ или лево и право)

[GreatRash]

weranda: Нагуглил: называется такая форма "squircle" (квадруг по-русски, нечно среднее между квадратом и кругом). Варианты реализации гуглятся по запросу "CSS3 squircle". Но сам CSS3 так не умеет, либо извращения с псевдоэлементами, либо маски, либо SVG.

Лично у меня вот так получилось: codepen.io/anon/pen/PzwLJj

Answer 2

[Dark Hole]

Сложную можно - например
Но такую, как вы предлагаете... полагаю, это SVG

Answer 3

[Дмитрий]

https://jsfiddle.net/soledar10/fsekkwhL/