Как сверстать такой блок: нетиповая обводка?

Question

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

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

PS: Забыл уточнить, что фон блока должен быть прозрачным. Так как при реализации мобильной версии этот блок может оказаться над фоновым изображением.

Comments

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

Решил задачу сам, метод правда не идеален в плане верстки, но вроде получилось.
border-left и border-right 2px сделал, а уголки пришлось ставить картинками через два дополнительных div с абсолютным позиционированием.

Answer 1

[Алексей Зуев]

А почему просто левые и правые стороны не построить через псевдоэлементы?
jsfiddle.net/yurzui/w61r9ejj

Comments

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

Я даже поменяю правильное решение! Спасибо!!!

Answer 2

[Максим Тимофеев]

1. border: green #2px solid;
внутри блока с бордерами блок, который имеет отрицательные маргины и перекрывает собой часть верхнего и нижнего бордера
2. Два бекгроунда png с прозрачностью
3. Не совсем один в один, но можно поиграть с border-radius, задав только левый и правый бордер и бордер раадиус, получите похожий эффект, но угол будет меньше

Comments

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

Забыл уточнить, что фон блока должен быть прозрачным.

Answer 3

[Думай Головой]

обычный border + before и after которые перекрывают его снизу и сверху

Comments

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

Забыл уточнить, что фон блока должен быть прозрачным.