CodePen

HTML

            
              <div>
  <h1>Darn</h1>
  <p>&</p>
  <h2>Good</h2>
</div>

<div>
  <h1>This one does not have <code>overflow: hidden;</code></h1>
  <p>Instead this makes a pseudo table</p>
  <h2>And transforms borders in a very interesting way!</h2>
</div>

<p>This works a separator (see, quite dynamic, you don't need to contain it in a box)</p>

<div>
  <h1>Browser support is interesting</h1>
  <p>Works best in</p>
  <h2>Firefox</h2>
  <p>Chrome and IE9+ use ... I don't know what ... to calculate table width.</p>
  <h2>Older browsers</h2>
  <p>Don't look as good, but "acceptable"</p>
</div>


<p>So that's it?</p>

<div style="width:25em">
  <h1>No!</h1>
  <p>Give a width to container...</p>
  <h2>And everyone agree!</h2>
</div>

<p>In short: safe to use. Best in Firefox, Chrome and IE9+. IE8 does not support transforms, but you get lines anyway.</p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html {
  background: radial-gradient(ellipse at center 25%, white, DarkSlateGray) no-repeat;
  min-height: 100%;
}

body {
  font-family: Georgia, serif;
  margin: 0 2em;
  text-align: center;
}

div {
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(0, 0, 0, .1);
  display: inline-block;
  margin: 2em;
  padding: .5em 1em;
  position: relative;
}

h1,h2 {
  margin: 0;
  text-transform: uppercase;
}

code {
  text-transform: none;
}

p {
  border-collapse: separate;
  display: table;
  margin: .5em 0;
  white-space: nowrap;
  width: 100%;
}

p:before,p:after {
  background: rgba(255, 255, 255, .1);
  border-bottom: 4px solid DarkOliveGreen;
  border-top: 4px solid DarkOliveGreen;
  border-color: rgba(0, 48, 0, .4);
  content: '';
  display: table-cell;
  width: 49%;
}

p:before {
  -ms-transform: scaleY(.25) translateX(-.25em);
  -webkit-transform: scaleY(.25) translateX(-.25em);
  transform: scaleY(.25) translateX(-.25em);
}

p:after {
  -ms-transform: scaleY(.25) translateX(.25em);
  -webkit-transform: scaleY(.25) translateX(.25em);
  transform: scaleY(.25) translateX(.25em);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................