I've been testing an idea of extended/projecting borders with a few nested divs, and I have a working example below.
Basically, what I would like to achieve is vertical and horizontal borders that extend outside of a box with content inside. Sort of like a drafting look. I want this to be fully responsive if possible.
In my code, I have set heights with negative margins in order to get the effect I was looking for visually, but it seems like my markup is way too bloated for what I want to do. It is responsive horizontally, but vertically I just have the overflow hidden.
Another idea that went through my head while doing this is to have 4 divs, 1 for each border side (top,right,bottom,left) and then offset each div a certain amount to achieve the effect. Sort of like a "jiggled" cluster of divs. The 4 divs would be carried by a parent container AND be responsive.
Can this be done simpler than what I have in the fiddle? Is there a way to have it be flexible vertically as well as horizontally (fully responsive)? Would it be possible to have variable extensions with each border side (like 2px on one side and 4px on another)?
Without further nonsense, here's what I have so far:
body {
margin: 0;
padding: 0;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
/* text-align: center; */
}
.container {
margin: 50px auto 0;
padding: 0;
width: 75%;
height: 200px;
position: relative;
}
.box-vert {
margin: -10px 0;
padding: 0;
overflow: visible;
height: 200px;
position: absolute;
border: 1px solid #C5C5C5;
border-top: none;
border-bottom: none;
}
.box-horz {
height: 180px;
margin: 10px -10px;
overflow: visible;
border: 1px solid #C5C5C5;
border-left: none;
border-right: none;
padding: 0;
}
.box-inner {
margin: 0 10px;
padding: 20px;
background-color: #ECECEC;
height: 140px;
float: left;
overflow: hidden;
}
.box-inner h1 {
margin: 0 0 10px;
text-transform: uppercase;
font-weight: 200;
letter-spacing: 3px;
font-size: 30px;
color: #009688;
}
.box-inner p {
margin: 0;
line-height: 1.4;
font-size: 14px;
color: #666;
}<div class="container">
<div class="box-vert">
<div class="box-horz">
<div class="box-inner">
<h1>Title Text Here</h1>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
</div>