Different “legend” — wait for it — experiments!

dabblet.css

/* Different “legend” — wait for it — experiments! */
.fieldset {
    margin: 1em 0;
    border: 2px groove #AAA;
}

.fieldset_special>.legend {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.legend__inner {
    display: block;
    overflow: hidden;

    text-align: center;
    white-space: nowrap;
}

.legend__content {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    line-height: 1.4;
}

.legend__left,
.legend__right {
    display: inline-block;
    
    vertical-align: middle;
    
    border-top: 2px groove #AAA;
    width: 999px;
    margin: 0 0 0 -999px;
}

.legend__right {
    margin: 0 -999px 0 0;
}

.legend__part1 {
    float: left;
    margin: 0 2px;
}
.legend__part2 {
    float: right;
    margin: 0 2px 0 8px;
}
.legend__hr {
    position: relative;
    left: 2px; /* Can't use negative margin without losing the desired behavior */

    display: block;
    overflow: hidden;

    border-top: 2px groove #AAA;
    margin: .5em 0 0 0;
}


/* Showing that gaps are transparent */
/* Pattern got from http://lea.verou.me/css3patterns/#diagonal-checkerboard */

BODY {
    background-color: #EEE;
    background-image: -webkit-linear-gradient( 45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD), 
                      -webkit-linear-gradient(-45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD);
    background-image:    -moz-linear-gradient( 45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD), 
                         -moz-linear-gradient(-45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD);
    background-image:      -o-linear-gradient( 45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD), 
                           -o-linear-gradient(-45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD);
    background-image:         linear-gradient( 45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD), 
                              linear-gradient(-45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD);
    background-size:60px 60px;
    }

.fieldset_righty {
    direction: rtl;
}

.fieldset_righty > .legend,
.fieldset_righty > .fieldset__content {
    direction: ltr;
}

H2 {
    text-align: center;
}

dabblet.html

<h2>Just a legend</h2>
<fieldset class="fieldset">
    <legend class="legend">Nothing special</legend>
    <p>Just some styles to make this fieldset look like custom others.</p>
    <p><a href="http://dabblet.com/gist/1541043">Edit this dabblet</a> and <a href="http://twitter.com/#!/kizmarh">follow me on twitter</a>.</p>

</fieldset>

<h2>Legend on the right</h2>
<fieldset class="fieldset fieldset_righty">
    <legend class="legend">Well, that's simple</legend>
    <div class="fieldset__content">And just some content</div>
</fieldset>

<h2>Centered legend</h2>
<fieldset class="fieldset fieldset_special">
    <legend class="legend">
        <span class="legend__inner">
            <span class="legend__left"></span>
            <span class="legend__content">Wait for it…</span>
            <span class="legend__right"></span>
        </span>
    </legend>
    And just some content
</fieldset>

<h2>Two legends</h2>
<fieldset class="fieldset fieldset_special">
    <legend class="legend">
        <span class="legend__part1">I'm the left part</span>
        <span class="legend__part2">And I'm the right one</span>
        <span class="legend__hr"></span>
    </legend>
    <div class="fieldset__content">And just some content</div>
</fieldset>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}