Beveled corners using CSS border attribute

Part of an exploration of bevel techniques, this uses simple borders. Pros: Bevels are transparent to background images. Cons: Interior image cannot full bleed to bevel edge. Unnecessary markup.

by spdawson

HTML

<h2>Four Corner Bevel</h2>

<div class="bvc">
    <div class="bevel tl tr"></div>
    <div class="content">Content<br />Goes<br />Here</div>
    <div class="bevel bl br"></div>
</div>

<h2>Diagonal Bevel 1</h2>

<div class="bvc">
    <div class="bevel tr"></div>
    <div class="content">Top right, bottom left</div>
    <div class="bevel bl"></div>
</div>

<h2>Diagonal Bevel 2</h2>

<div class="bvc">
    <div class="bevel tl"></div>
    <div class="content">Top left, bottom right</div>
    <div class="bevel br"></div>
</div>

<h2>One Only</h2>

<div class="bvc">
    <div class="bevel tr"></div>
    <div class="content">One corner, see bottom bevel for spacing ...</div>
    <div class="bevel no_bevel"></div>
</div>

CSS

/* bevel size, left offset and color settings next 3 lines */ 
.bvc { left: -15px }
.bevel, .content { border-width: 15px }
.bevel, .content { border-color: #efefef; border-style:solid; }

.bvc {
    width: 90%; /* width of overall box, variable or fixed */ 
    margin: 0 auto;
    position: relative;
    margin-bottom: 15px;
}

.bvc .tr, .bvc .tl, .bvc .br, .bvc .bl { height: 0px; width: 100%; }
.bvc .tr, .bvc .tl { border-top: 0; }
.bvc .br, .bvc .bl { border-bottom: 0; }
.bvc .tr, .bvc .br { border-right-color: transparent; }
.bvc .tl, .bvc .bl { border-left-color: transparent; }
.no_bevel { height: 0px; width: 100%; border-bottom: 0; }

.content {
    background: #efefef url(http://placehold.it/2000x200/efefef) no-repeat;
    width: 100%;
    border-top: 0;
    border-bottom: 0;
}

body {
    background: url(http://placehold.it/1x2/333/777);
    margin: 20px;
}
h2 {
    margin-bottom: 10px; 
    color: white;        
}