Как сделать у блока нестандартный бордер?

Question

[MRcracker]

Как сделать такую рамку у блока?

Comments

[De Slow]

Блок должен быть адаптивным?
Если нет, почему бы не поставить ее как bg?

[Сергей Горячев]

Lesha Weal: Даже если не адаптивный, multiple background еще никто не отменял.

[De Slow]

Sergey Goryachev: ух, а я про него совсем не помню. Спасибо

Answer 1

[vintage]

htmlbook.ru/css/border-image

Comments

[Сергей Горячев]

Хотел написать его, но поддержка браузерами на зародышном уровне, к сожалению. caniuse.com/#feat=border-image , в отличии от caniuse.com/#feat=multibackgrounds

[Сергей Горячев]

Если что-то со скрипом работает в хроме, то такое свойство пока не стоит использовать) Не дорос еще интернет для него) Но решение несомненно правильное.

Answer 2

[Сергей Горячев]

multiple background css
Я бы сделал background через base64.
Займет мало места, картинки простые.

Например, вот так - https://jsfiddle.net/webirus/dkbrfku0/
Сделал только одну картинку, остальные по инструкции можно.
https://habrahabr.ru/post/116538/

Можно и не делать base64, просто указав картинки:
https://developer.mozilla.org/en-US/docs/Web/CSS/C...

.myclass {
  background: background1, background 2, ..., backgroundN;
}

Но я всё равно сделал бы base64 из этого.
По мне, так оно меньше места занимает и грузится вместе с css-файлом.
Тем более картинки несут смысл для блока.

Comments

[MRcracker]

а более подробно можно?

[Сергей Горячев]

MRcracker: ну, раз погуглить совсем влом, сделал.