Как сделать такой border в css?

Question

[Stacy None]

Добрый вечер!
Возможно ли сделать такой border в CSS?
В виде чертежа с выпирающими углами как на картинке?
Если да, то подскажите пожалуйста как? Буду очень признателен. Заранее спасибо!

Answer 1

[Максим]

https://codepen.io/MaximLensky/pen/RxooXP?editors=1100 вроде так ... проверял с маленьким количеством текста и с большим количеством текста

Answer 2

[Владимир Проскурин]

И приз за самый короткий вариант, достается мне https://jsfiddle.net/Vlad_IT/2n68hk3s/
UPD: Можно даже еще короче https://jsfiddle.net/Vlad_IT/mg79eL8z/

Comments

[Антон Спирин]

все ходящие за блок линии должны быть разной длины.

[Максим]

да.. но есть маленькое НО

[Владимир Проскурин]

Антон Спирин, не, это же автор просто рукой рисовал. Тогда в таком случае еще нужны закругленные углы у полосок, а моим способом это уже не сделать, придется ваш вариант использовать.

[Антон Спирин]

Vlad_IT, тем способом, что я добавил тоже не сделать, если толщина линии менее 6px. Полагаю этот вопрос можно решить с помощью radial gradient

Answer 3

[Alisa1]

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

Answer 4

[prodavec macdonalds]

Возможно