Beveled corners using CSS3 gradients

Part of an exploration of bevel techniques, this uses CSS3 gradients.

by ajinkyax

HTML

<h2>Four Corner Bevel</h2>

<div class="bevel all">
    <p>Content<br />Goes<br />Here</p>
</div>

<h2>Diagonal Bevel 1</h2>

<div class="bevel trbl">
    <p>Top right, bottom left</p>
</div>

<h2>Diagonal Bevel 2</h2>

<div class="bevel tlbr">
    <p>Top left, bottom right</p>
</div>

<h2>One Only</h2>

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

CSS

.bevel.all {
    background: #efefef; /* default color */
    background:
        -moz-linear-gradient(45deg,  transparent 10px, #efefef 10px),
        -moz-linear-gradient(135deg, transparent 10px, #efefef 10px),
        -moz-linear-gradient(225deg, transparent 10px, #efefef 10px),
        -moz-linear-gradient(315deg, transparent 10px, #efefef 10px);
    background:
        -o-linear-gradient(45deg,  transparent 10px, #efefef 10px),
        -o-linear-gradient(135deg, transparent 10px, #efefef 10px),
        -o-linear-gradient(225deg, transparent 10px, #efefef 10px),
        -o-linear-gradient(315deg, transparent 10px, #efefef 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 10px, #efefef 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #efefef 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #efefef 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #efefef 10px);
}
.bevel.tlbr {
    background: #efefef; /* default color */
    background:
        -moz-linear-gradient(45deg,  #efefef 10px, #efefef 10px),
        -moz-linear-gradient(135deg, transparent 10px, #efefef 10px),
        -moz-linear-gradient(225deg, #efefef 10px, #efefef 10px),
        -moz-linear-gradient(315deg, transparent 10px, #efefef 10px);
    background:
        -o-linear-gradient(45deg,  #efefef 10px, #efefef 10px),
        -o-linear-gradient(135deg, transparent 10px, #efefef 10px),
        -o-linear-gradient(225deg, #efefef 10px, #efefef 10px),
        -o-linear-gradient(315deg, transparent 10px, #efefef 10px);
    background:
        -webkit-linear-gradient(45deg,  #efefef 10px, #efefef 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #efefef 10px),
        -webkit-linear-gradient(225deg, #efefef 10px, #efefef 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #efefef 10px);
}
.bevel.trbl {
    background: #efefef; /* default color */
    background:
        -moz-linear-gradient(45deg, ...