aisbdisd, Сейчас ваш вопрос похож на задание. С заданиями ходят на фриланс. Попробуйте почитать правила сервиса и сделайте так, чтобы это всё таки был вопрос, а не требование готового кода.
Для этого сделайте какие-то попытки решить задачу самостоятельно и покажите в песочнице что именно у вас не получилось.
Ankhena, у меня есть вот такие блоки, сделано на флексах.
Сейчас стоит svg картинка с абсолютным позиционированием. Вверху есть ценники. Но при адаптации ценники выходят за грани потому, что flex: 0 0 50%;
Они тоже расположены абсолютным позиционированием. Хочу сделать вместо svg элементов блоками, чтобы дать им position: relative и ценники не будут выходить за грани.
aisbdisd,
1. Если svg:
Нужно взять ромбик и задать ему background-repeat, background-size. Чтобы был по низу блока и размножался.
+ добавить на оставшуюся часть блока фон градиентом из белого в прозрачный.
2. Если без SVG, а просто градиентами.
То их нужно 3 штуки.
На верхнюю часть блока как в п.1.
На нижнюю два градиента вот по такому принципу. На каждый квадратик по два треугольника.
На скрине они полупрозрачные, чтобы было понятно.
Но при адаптации ценники выходят за грани потому, что flex: 0 0 50%;
Это какая-то лажа, извините.
Во-первых, не ясно зачем svg абсолютом.
Во-вторых, не ясно почему не дать родителю relative и спокойно позиционировать и SVG и цену.
Ну кроме того, что для SVG не нужен абсолют.
Простой
