This is a snippet referenced in http://mondaybynoon.com/20130114/css3-pseudo-elements-box-shadows-hidpi-retina-geometric-shapes/ that outlines how we can utilize pseudo-elements and box-shadows to get HiDPI-friendly geometic shapes into our designs without using images or extra markup.

terra-nova-location-snippet.scss

// snippet referenced in: http://mondaybynoon.com/20130114/css3-pseudo-elements-box-shadows-hidpi-retina-geometric-shapes/
// for project: http://terranovachurch.org

.locations .wrapper {

    height:210px;

    &:after {
        // implement the brackets
        content:' ';
        display:block;
        width:45px;
        height:135px;
        overflow: hidden;
        position:absolute;
        left:0;
        top:-135px;
        box-shadow:
            0 175px 0 0 $white,         // left bracket
            915px 175px 0 0 $white;     // right bracket
    }

    .details {
        position:absolute;
        left:5px;
        top:5px;
        right:5px;
        z-index:999;

        // middle separator
        &:after {
            content:' ';
            display:block;
            width:1px;
            background:$white;
            height:125px;
            left:480px;
            top:40px;
            position:absolute;
            @include opacity(0.9);
        }
    }

}

what is this?

As per the description and the comment on the first line, please see http://mondaybynoon.com/20130114/css3-pseudo-elements-box-shadows-hidpi-retina-geometric-shapes/ for context.