Border

by Vitaly Volovich

HTML

<div class="block">
     <h1>Как сверстать такой блок: нетиповая обводка?</h1>
Не могу сверстать такой блок. Проблема в том, чтобы он был резивый, как по ширине, так и по высоте. Подскажите, какие есть вообще варианты реализации. PS: Забыл уточнить, что фон блока должен быть прозрачным. Так как при реализации мобильной версии этот блок может оказаться над фоновым изображением.</div>

CSS

body {
    background: url(http://www.glunews.ru/images/news/1edc617560628d65ab3bdc40081cf9de.jpg) no-repeat fixed center center/cover;
    font-family: sans-serif;
}
h1 {
    margin: 0 0 15px;
    font-size: 24px;
}
.block {
    padding: 15px 35px;
    position: relative;
    color: #fff;
}
.block:before, .block:after {
    content:"";
    position: absolute;
    width: 20px;
    top: 0;
    bottom: 0;
    border: 3px solid;
}
.block:before {
    left: 0;
    border-right: 0;
    border-radius: 5px 0 0 5px;
}
.block:after {
    right: 0;
    border-left: 0;
    border-radius: 0 5px 5px 0;
}