3

Just getting into css and, though trying different approaches, I don't manage to design a content box with the borders I have in mind. It should look something like this:

Box as desired

In words: The borders should cross each other and continue for some maybe 30px, maybe we can call it overflow. Resulting in crosses at all four edges.

I have tried to design small cubic boxes each at every edge, and it kinda works. But I find it very hard to include them in my concept of responsiveness, as they don't shrink at the same rate that the actual box (lets call it <box>) does. The <box> has side margins in percent, so when the page is being scaled down, the small boxes <sbox> are in my way and preventing the margins of <box> from reaching out all the way to the frames borders.

Any ideas on how to make that one more elegant?

T J
  • 42,762
  • 13
  • 83
  • 138
M. Beit
  • 33
  • 1
  • 4

4 Answers4

3

You can do this using the help of before and after pseudo classes. 

* { box-sizing:border-box; }
.box { padding:20px; width:100px; height:100px;  position:relative;  border-left:2px solid #000; border-right:2px solid #000;  }

.box::after { position:absolute; top:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}

.box::before { position:absolute; bottom:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
    <div class="box">
      Content
    </div>

Demo

Shahil M
  • 3,836
  • 4
  • 25
  • 44
0

An example without pseudo classes

.outer{
  height: 1em;
  margin: 0 1em 0 1em;
}

.content{
  border: 1px solid #000;
  border-left: none;
  border-right: none;
}

.innerContent{
  margin: 0 1em 0 1em;
}

.borderLeftRight{
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
<div class="outer borderLeftRight"></div>
<div class="content">
  <div class="innerContent borderLeftRight">
    Content
  </div>
</div>
<div class="outer borderLeftRight"></div>
Sebastian Witeczek
  • 133
  • 1
  • 11
  • I like this one as it is adapting to the page's width! Thanks a lot! – M. Beit May 24 '16 at 11:10
  • @M.Beit If you look at my answer the second part does this and a lot better. No need for all of these HTML elements. Just remove the `div` width and it will be the same, the width was only there for the example. – Ruddy May 26 '16 at 08:19
0

Somebody already did something similar. I think the most elegant way is with pseudo selectors :before & :after. I feel you should do it in this way and not with wrappers. Most important things are setting your element's position to relative and then before and after selectors position to absolute. Then fiddle with border and top, bottom, left, right properties. 

.box {
  display: inline-block;
  position: relative;
  padding: 2em;
}
.box:after,
.box:before {
  position: absolute;
  content: "";
}
.box:after {
  border-top: 1px solid #f00;
  border-bottom: 1px solid #f00;
  left: 0;
  right: 0;
  top: 1em;
  bottom: 1em;
}
.box:before {
  border-left: 1px solid #f00;
  border-right: 1px solid #f00;
  left: 1em;
  right: 1em;
  top: 0;
  bottom: 0;
}
<div class="box">
  text inside
</div>
AlFra
  • 379
  • 1
  • 6
  • 17
0

Just going to put this up here to show you can do this using a single pseudo element.

Fixed width

You will have to set the width and height for it, can get around this using calc but its support isn't amazing yet.

* {
  box-sizing: border-box;
}
div {
  width: 300px;
  height: 200px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin: 100px;
  position: relative;
  padding: 10px 25px;
}
div:after {
  content: "";
  display: block;
  position: absolute;
  top: -20px;
  left: 20px;
  width: 260px;
  height: 240px;
  border-left: 1px solid;
  border-right: 1px solid;
}
<div>Testing</div>

Auto width

Example using calc, this will work with any size of text.

* {
  box-sizing: border-box;
}
div {
  width: 300px;
  height: 200px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin: 100px;
  position: relative;
  padding: 10px 25px;
}
div:after {
  content: "";
  display: block;
  position: absolute;
  top: -20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% + 40px);
  border-left: 1px solid;
  border-right: 1px solid;
}
<div>Hello</div>
Ruddy
  • 9,795
  • 5
  • 45
  • 66