Creating a stroked frame effect with css - html

Question

I have a design with this effect
I dont care about the font styles or any details, all i am focused right now is on the creating the frame and if possible the button as well. Does anyone know how to do this kind of effect in css?
Here is my very basic html/css code, wont even be of any help. And you can completely modify it if it suits better. BTW i am using bootstrap 3.
/******** The html *********/
<div class="col-md-12 bg-img">
<div>Italy has never been so close</div>
</div>
/******** The css *********/
.bg-img {
display: table;
width: 100%;
height: 100px;
text-align: center;
background: #999 url("http://p1.pichost.me/i/15/1380265.jpg") no-repeat fixed center;
}
.bg-img div {
display: table-cell;
vertical-align: middle;
width:10px;
font-weight:700;
}
I am using a generic image, as it shouldn't make any difference. Here is the fiddle.
https://jsfiddle.net/3aL4xnr8/

Answer 1

You can do this with :after and :before pseudo-elements.
div {
display: table;
margin: 0 auto;
width: 30%;
padding: 20px;
position: relative;
height: 200px;
}
p {
display: table-cell;
vertical-align: middle;
font-size: 40px;
}
div:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
border-top: 1px solid black;
border-left: 1px solid black;
}
div:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 30%;
height: 50%;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
button {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
<div>
<p>Lorem ipsum dolor sit amet.</p>
<button>Button</button>
</div>