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

Question

[aisbdisd]

Нужно сделать такую границу с помощью css
Если фоном ставить или картинкой с абсолютным позиционированием, при адаптации проблемы

Или использовать фреймворк js (напишите код, пожалуйста)

Comments

[Ankhena]

Или использовать фреймворк js (напишите код, пожалуйста)

Что-что использовать для фона?

Если фоном ставить ... при адаптации проблемы

Какие?

Что вы делали и что именно не получилось?

Самое простое это градиенты и filter drop-shadow

[aisbdisd]

Ankhena, если фоном использовать просто эту картинку

[aisbdisd]

Ankhena, ну я слышал что можно это сделать градиентами, мне нужен код

[Ankhena]

aisbdisd, имеет смысл почитать про background-repeat, background-size и т.д.

ну я слышал что можно это сделать градиентами, мне нужен код

тут

[aisbdisd]

Ankhena, скажите, зачем я сюда написал? Чтобы Вы направили меня на фриланс? Если ничем не можете помочь, прошу не отвечать.

[Ankhena]

aisbdisd, Сейчас ваш вопрос похож на задание. С заданиями ходят на фриланс. Попробуйте почитать правила сервиса и сделайте так, чтобы это всё таки был вопрос, а не требование готового кода.

Для этого сделайте какие-то попытки решить задачу самостоятельно и покажите в песочнице что именно у вас не получилось.

[aisbdisd]

Ankhena, у меня есть вот такие блоки, сделано на флексах.



Сейчас стоит svg картинка с абсолютным позиционированием. Вверху есть ценники. Но при адаптации ценники выходят за грани потому, что flex: 0 0 50%;



Они тоже расположены абсолютным позиционированием. Хочу сделать вместо svg элементов блоками, чтобы дать им position: relative и ценники не будут выходить за грани.

[Ankhena]

aisbdisd,
1. Если svg:
Нужно взять ромбик и задать ему background-repeat, background-size. Чтобы был по низу блока и размножался.
+ добавить на оставшуюся часть блока фон градиентом из белого в прозрачный.

2. Если без SVG, а просто градиентами.
То их нужно 3 штуки.
На верхнюю часть блока как в п.1.
На нижнюю два градиента вот по такому принципу. На каждый квадратик по два треугольника.
На скрине они полупрозрачные, чтобы было понятно.

Но при адаптации ценники выходят за грани потому, что flex: 0 0 50%;

Это какая-то лажа, извините.
Во-первых, не ясно зачем svg абсолютом.
Во-вторых, не ясно почему не дать родителю relative и спокойно позиционировать и SVG и цену.
Ну кроме того, что для SVG не нужен абсолют.

[aisbdisd]

Ankhena,
Проблему решил добавлением еще одного родителя и задал ему фиксированную ширину. Спасибо)

[Ankhena]

aisbdisd, ужасно. Надеюсь, что это не для клиента.