Как средствами html+css сделать такое?

Question

[Александр Вербицкий]

Я так понимаю нужны три блока, один с обводкой, один залитый и третий с текстом. Но как сделать подобное, не пойму. Заранее спасибо!)

Comments

[Lynn «Кофеман»]

А зачем?
Для картинок лучше подходит SVG

[xdevelx]

Нужен один блок и два псевдоэлемента.

[Александр Вербицкий]

Картинка на фоне, если текст длинный, растягивается, где-то красная линия толще, где-то тоньше... Короче не айс

[Lynn «Кофеман»]

Александр Вербицкий, не понял про «растягивается». Картинку в студию

[Антон Антон]

Александр Вербицкий, у svg есть параметр, чтобы линии были одной толщины не зависимо от растягивания

[Александр Вербицкий]

Lynn «Кофеман», Как пример:

Понятное дело, что будут переносы, это больше для наглядности

[Вадим]

Как средствами html+css сделать такое

1) блок с текстом.
2) Два псевдоэлемента
3) perspective для блока с текстом
4) для псевдо: position: absolute, z-index: -1 и дальше играться с transform: perspcetive\rotate3d\translate (не для каждого псевдо нужны все свойства)

[Вадим]

Александр Вербицкий, Но вот так как на картинке в комментах без свг будет сложно сделать.

[Вадим]

Александр Вербицкий, а ещё дизайнеру привет. Как может быть тень у левого нижнего края если фигура как бы вдавлена вниз как раз левым нижним углом?

Answer 1

[Антон Антон]

SVG +
https://developer.mozilla.org/en-US/docs/Web/SVG/A...
vector-effect="non-scaling-stroke"