Как сверстать неровную адаптивную рамку со скруглёнными краями?

Question

[Виталий Кузнецов]

Как на css и svg сделать подобное? и ещё адаптивно :-)



Пробовал использовать mask и bg-size: cover — но всё плывёт так или иначе.

Можно надо какой-то js использовать для маштабирование svg?

Comments

[Антон]

а чего не clip path?

[Виталий Кузнецов]

Антон, а как там в svg адаптивно сделать? только через js?

[Антон]

Виталий Кузнецов, а почему именно свг, зачем оно там?)

[dom1n1k]

Видимо имеется в виду нарисовать скругленный прямоугольник обычными средствами, а потом срезать нижний скос через clip-path.
В первом приближении идея рабочая, но непонятно что делать с правым нижним скруглением - раз, с адаптивностью там будут "нюансы" - два.

[Антон]

Виталий Кузнецов, dom1n1k, подрихтовать смещение точек, добавить еще, если требуется, но вцелом -быстрый вариант
https://jsfiddle.net/ubyqx952/

[dom1n1k]

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

[Антон]

dom1n1k, увы, сопутствующие потери, либо компенсировать их брейкпоинтами и соответствующими правками в них

[Виталий Кузнецов]

Антон, https://jsfiddle.net/ubyqx952/ по-моему идеально :-)

[Виталий Кузнецов]

Антон, а как рамку задать? есть вот такой «дизайн»

[Антон]

Виталий Кузнецов, никак...разве что, создать второй такой же блок слоем ниже, и больше на пару пикселей, чтобы его границы выезжали...Бутерброд.

[RAX7]

Виталий Кузнецов, как вариант: делаешь маску из двух вложенных svg и за счет preserveAspectRatio="xMidYMin/YMax slice" позиционируешь эти svgшки и обрезаешь

[Виталий Кузнецов]

RAX7, лихо, попробую :-) Спасибо!

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/drPpdv - если надо адаптировать то у .items удалить фиксированый размер и сами уже подстраиваете как должны выглядеть ваши поля ввода

Comments

[Виталий Кузнецов]

О, хорошее решение :-) можно даже адаптивным сделать.

Answer 2

[Андрей]

Свойство CSS clip-path пробовали?

Ссылка на удобный онлайн-генератор

Comments

[Виталий Кузнецов]

Попробую! Не знал про такое)

Answer 3

[Максим Тимофеев]

.myFormWrapper {
   background: url('myback.svg') no-repeat 50% 50%;
   background-size: cover;
   padding-bottom: 30%;
}

в самом svg файле обычный path c заливкой.
фсе

Comments

[dom1n1k]

Это самая первая мысль, которая приходит в голову.
Но нет, она неправильная - при адаптивности тут будут корёжиться скругления.

[Максим Тимофеев]

dom1n1k, надо посмотреть, не уверен, что Вы правы, но нет времени воссоздать и проверить)))

[Антон]

dom1n1k, Можете решить элементами наркомании, а именно - оставить точки угла не процентами от ширины, а (ширина - N-px), тогда точки угла всегда будут иметь одно положение, вне зависимости от ширины экрана.

[Виталий Кузнецов]

Антон, мм надо попробовать)