Как верно сверстать такую карточку товара?

Question

[Дмитрий Антонов]

(изображение плохого качества: поэтому идеально если цвет рамки будет белый с шириной в 1px )
Подскажите как бы вы сверстали саму рамку для этой карточки. Изначально хотел ток через border. но проблема в том что нет у этих карточек фона. и не получиться закрыть кусок верхнего бордера прозрачным цветом)... Подскажите как вы бы сделали ? и как лучше?.... Возможно svg ?

Answer 1

[dom1n1k]

Двумя картинками в фоне карточки.
Позиционируются они в противоположные (по диагонали) углы.
Карточка может тянуться как угодно.

Comments

[Дмитрий Антонов]

Спасибо, но если честно не могу понять как это сделать пока что )) вернее какую часть изображение и в какой угл)

[dom1n1k]

На самом деле приём стариннейший, все кто застал темные времена (скругления вручную и пр.), знают его прекрасно. Это новое поколение сразу кидается в псевдоэлементы и 3д-трансформации... зачем?..
codepen.io/dom1n1k/pen/gwOQYd

[Дмитрий Антонов]

Вот теперь понял )) создаём изображение с нашим нужным элементом в углу, и делаем в большую ширину и длину, что бы линии хватило на карточку товара)) спасибо)) Ваш способ самый простой )

Answer 2

[Дима Паутов]

https://jsfiddle.net/1wswgyo6/

Comments

[Дмитрий Антонов]

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

Answer 3

[Андрей Федоров]

Превдоэлементы с абсолютным позиционированием:
codepen.io/aliencash/pen/xExyyE

Comments

[Дмитрий Антонов]

А вот с двумя псевдо элементами я чёт не додумался) но как вариант подходит )) Что то сам не додумылся )) Если лучше нечего не подкинут отмечу как решением)

[Андрей Федоров]

Дмитрий Антонов: Строго говоря мой ответ не совсем верный, т.к. нужно думать сколько пикселей у карточки товара займет заголовок в ширину. Вот более правильный codepen.io/aliencash/pen/vXYVbp

[Дмитрий Антонов]

И еще раз спасибо )) за варианты) думаю в будущем они тоже мне понадобятся)) но с изображением оказалась намного проще ))

[Андрей Федоров]

Дмитрий Антонов: на вскидку 5 причин недальновидности такого решения:
1. захотите поменять цвет границы или ее толщину придется переделывать картинки.
2. если карточка товара больше 1000px по вертикали или по диагонали - придется переделывать картинки.
3. картинки весят в десять-двадцать раз больше, чем соответствующий код.
4. загрузка сайта по протоколу http имеет ограничение - 5 потоков на 1 домен. соответственно 1 css файл загрузится быстрее чем css+2 картинки если принять во внимание, что грузятся и другие файлы.
5. выщербленный угол на картинке имеет фиксированные размеры. что будете делать когда его нужно будет поменять?

Answer 4

[Дмитрий Антонов]