<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>

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

  <h1>Browser support is interesting</h1>
  <p>Works best in</p>
  <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>

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

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

<p>In short: safe to use. Best in Firefox, Chrome and IE9+. IE8 does not support transforms, but you get lines anyway.</p>
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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.