Возможно ли на собрать такой блок на css, но что бы он тянулся в зависимости от содержимого?

Question

[hudiakov]

Возможно через псевдоэлементы добавить снизу и сверху например бордер. Например:

div:after {
 content: '';
 position: absolute;
width: 0;
height: 0px;
top: 100%;
right: 0;
border-bottom: 9px solid transparent;
border-left: 264px solid red;
}

и добавить два span пустых , и им так же нужные бордеры, но ширина блока будет изменять от содержимого, как ее узнать на css.

Comments

[szQocks]

фоновую картинку

или через clip-path и вложенному блоку с текстом - ограничить ширину относительно родителя и сделать его по центру

[hudiakov]

szQocks, не вариант, у меня весь сайт в таких блоках. Проще тогда на js.

[szQocks]

hudiakov,

у меня весь сайт в таких блоках

- ужас

Проще тогда на js

- успехов

Answer 1

[Aetae]

Просто делаешь примитивную svg-картинку бэкграундом или встроеенно и растягиваешь на весь размер блока.

Если хочется извращений - можно псевдоэлементом с трансформацией:

Comments

[hudiakov]

Может я что не так понял, вот попробовал по вашему совету https://codepen.io/Alex-Miranovich/pen/ExGGRPV.
Так имели ввиду?
Через трансформацию попробую.

[Aetae]

hudiakov, типа того, только preserveAspectRatio="none" добавить к svg чтоб тянулось:

Ещё границу можно не рисовать через path, а сделать через non-scaling-stroke, тогда её толщина не будет растягиваться:

Ну и, наконец, если нужно, чтоб углы были всегда одинаковы, а тянулись только стороны - то тут уж только играться с обрезкой, проще всего через clip-path в css:

В svg тоже можно, но уже мудрёно.

P.S. Если охота прям совсем заморочиться, то можно ещё и текст чётко по фигуре расправить, с помощью shape-outside. :)

[hudiakov]

Спасибо