Как сверстать такое?

Question

[Blondguy]

Как сделать такие рамки в а также как сделать такие линии которые уходят от них влево?

Comments

[szQocks]

задача довольно нестандартная, прям идеального кого-то решения вряд ли существует, скорее всего это либо будут манипуляции с градиентом либо svg

я бы советовал не парится, и тупо взять svg и влупить, а линии абсолютом

[modelair]

а я бы посоветовал просто глянуть в devtools

[Ankhena]

border-image
gradient
псевдо
svg
и т.д.

линии влево абсолютами либо гридами

[rootnoroot]

modelair, а если это макет? )))

[Blondguy]

rootnoroot, конечно это макет)

[nolotion]

какие-то идиоты считают что их полотенца покупают из-за "высокотехнологичного нетканного полотна", какое чудо

[Одиночка Айс]

nolotion, куча идиотов что-то считают и думают, се ля ви

[rootnoroot]

Одиночка Айс, пусть думают умные )

Answer 1

[d'Ivan]

Вёрстка состоит из разных слоёв, накладываемых один на другой. Читай про Z-order, compositing.
Кусок изображения с полотном слева выглядит как обрамление в прямоугольник с закруглёнными краями большого радиуса, рамкой и тенью.
Изображение в круге - также обрамление в окружность. Примеры: https://pqina.nl/blog/applying-a-circular-crop-mas...
Линии прямоугольника можно сделать сначала как прямоугольники со сплошными линиями, а сверху наложить другие прямоугольники с цветом фона. Таким образом, получится эффект прерывистости. А если делать гораздо проще, то просто взять готовое изображение PNG с прозрачным альфа-каналом в виде фона.

Answer 2

[Леонид Добрый]

насчет линий, можно попробывать transform rotate*(45deg) или -45 там уже методо тыка