Как верстаются такие рамки?

Question

[lemme]

Высота и ширина блока может быть любой.


Пробовал с помощью border-image repeating-linear gradient. Ничего путного не вышло.

Самый простой вариант (как мне кажется):
Основной блок (before, after) - верхняя и нижняя границы
дополнительный элемент - права и левая

может есть лучшее решение?.

Может есть проще вариант?

Answer 1

[Алексей]

Как самый крайний вариант - div в div, у внешнего div фон из повторяющихся наклонных полос (градиаент или картинка.
Но это уже самый крайний вариант :)
Типа этого codepen.io/anon/pen/qNdjoB

Comments

[lemme]

не, уж лучше с псевоэлементами=))

[lemme]

Ибо, придется задавать фон, а это не лучший вариант.

[Алексей]

Не заметил что у вас уже есть один вариант, сорри.

Answer 2

[lemme]

Вот вариант, о котором я говорил с псевдоэлементами и 1 доп. блоком.

Может кому-нибудь подойдет. (если ответа другого не найдется).
https://jsfiddle.net/c9gv45b8/

Comments

[Алексей]

Понял что вы имели в виду, хороший вариант, проблема только в нестыковке углов.

[lemme]

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

[Алексей]

А мой крайний вариант тоже не даст нужной вам картинки, он сработает только если толщина рамки 1 пиксель. При более толстых рамках будут скосы.

Answer 3

[HamSter]

border-image generator разве не подойдет?

Comments

[lemme]

к сожалению нет, ибо вопрос в стыковке цветов. Уже пробовал.

Answer 4

[lfoma]

Блок фиксированный или нет? Если фиксированный, то сделать background картинкой, если динамичный, то через border-image. Варианты без картинок в данном случае невозможны из-за сложного ритма.

Comments

[lemme]

вариант динамический, в вопросе это написано

[lfoma]

lemme: Извини, не заметил) Тогда только border-image. Так же нужно указать round, что бы всегда состыковывались цвета