aisbdisd,
1. Если svg:
Нужно взять ромбик и задать ему background-repeat, background-size. Чтобы был по низу блока и размножался.
+ добавить на оставшуюся часть блока фон градиентом из белого в прозрачный.
2. Если без SVG, а просто градиентами.
То их нужно 3 штуки.
На верхнюю часть блока как в п.1.
На нижнюю два градиента вот по такому принципу. На каждый квадратик по два треугольника.
На скрине они полупрозрачные, чтобы было понятно.
Но при адаптации ценники выходят за грани потому, что flex: 0 0 50%;
Это какая-то лажа, извините.
Во-первых, не ясно зачем svg абсолютом.
Во-вторых, не ясно почему не дать родителю relative и спокойно позиционировать и SVG и цену.
Ну кроме того, что для SVG не нужен абсолют.
aisbdisd, Сейчас ваш вопрос похож на задание. С заданиями ходят на фриланс. Попробуйте почитать правила сервиса и сделайте так, чтобы это всё таки был вопрос, а не требование готового кода.
Для этого сделайте какие-то попытки решить задачу самостоятельно и покажите в песочнице что именно у вас не получилось.
Если это swiper, то нужно убрать у слайдов высоту 100%.
Если не swiper, то смотреть, что в стилях и почему они стали такой высоты.
Может, сами слайды одинакового размера, но внутри есть доп обертка.
Или еще что-нибудь.
По скрину этого не определить.
Контейнер внутри карточки не нужен. Он где-то выше должен быть.
Картинки вставляйте прямоугольные, а углы скругляйте с помощью border-radius. Целее будете при изменениях и картинок и стилей.
Сама карточка это не div.
У вас ведь будет список таких карточек. А это ul и li.
Ну или article, если не хочется делать списком.
Если вам хочется сделать пустой div, то с вероятностью 99% вы делаете что-то не то.
В разметке должны быть только элементы имеющие смысл. Всё остальное в стилях.
Пустые элементы могут быть нужны, если это подготовленное место для вывода чего-нибудь с помощью скриптов. Либо при затейливом дизайне, когда для решения не хватает псевдоэлементов.
Если лектор на курсах делал фоны, как вы, то смотреть его больше не нужно.
А дальше уже история с адаптивом.
Я даже и не знал что такое семантика. И что она так важна...
Да, потому что совсем не все, кто пользуется сайтами могу или умеют смотреть глазами.
Это и люди с ограниченными возможностями и читалки, которые им читают и разнообразные роботы.
Андрей Годунко,
1. Так, а зачем вы фон чистым цветом делаете картинкой? Да ещё и контентной.
Для этого есть прекрасное свойство background-color.
2. Этого <div class="line"></div> тоже не должно быть в разметке.
Это украшение => псевдоэлементы.
Как вариант: два бордера, а псевдоэлементом закрасить уголок.
Но я бы лучше всё таки две полоски с помощью псевдо делала.
Чтобы не было заморочек при смене фона.
3. Тексту абсолют тоже не нужен.
Просто флекс на два столбца.
Или гриды.
4. Почитайте немножко про семантику.
Какие теги для заголовков, какие для текста и т.д.
ambisinister One, ну предположим, вы найдете верхнюю левую закорюку в html-сущностях и остальные правильной толщины...
Сколько псевдоэлементов вам нужно будет сделать и прибить абсолютом? Некоторые там ещё двоятся.
Но вы в праве считать, что это короче и проще, чем свойство background.
Я же вам его уже давала.
Куда потерялся?
Что не так?