CSS semi-transparent folded-corners

Using CSS gradients and pseudo-elements to create semi-transparent folded corners. Background images no problem.

HTML

<div class="gradients"><p>CSS folded-corner effect with a background image showing through.</p>
    <p><small>Uses Lea Verou's CSS gradient hack.</small></p></div>

<div class="pseudos"><p>CSS folded-corner effect with a background image showing through.</p>
    <p><small>Uses Lea Verou's CSS gradient hack to knock out the top right corner, and a pseudo-element to create the fold with box-shadow. Is only needed for semi-transparency...otherwise could be all done with gradients.</small></p></div>

CSS

div {
    position: relative;
    overflow: hidden;
    background: #c00; /* fallback */
}

.gradients {
    background:
        -webkit-linear-gradient(225deg, transparent 50%,   rgba(255,0,0,0.4) 50%),
        -webkit-linear-gradient(45deg,  rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        -webkit-linear-gradient(135deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        -webkit-linear-gradient(225deg, transparent 10px,  rgba(255,0,0,0.4) 10px);
    background:
        -moz-linear-gradient(225deg, transparent 50%,   rgba(255,0,0,0.4) 50%),
        -moz-linear-gradient(45deg,  rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        -moz-linear-gradient(135deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        -moz-linear-gradient(225deg, transparent 10px,  rgba(255,0,0,0.4) 10px);
    background:
        -o-linear-gradient(225deg, transparent 50%,   rgba(255,0,0,0.4) 50%)
        -o-linear-gradient(45deg,  rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        -o-linear-gradient(135deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        -o-linear-gradient(225deg, transparent 10px,  rgba(255,0,0,0.4) 10px);
    background:
        linear-gradient(225deg, transparent 50%,   rgba(255,0,0,0.4) 50%),
        linear-gradient(45deg,  rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        linear-gradient(135deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        linear-gradient(225deg, transparent 10px,  rgba(255,0,0,0.4) 10px);
}

.gradients {
    -webkit-background-size: 14px 14px, 50% 100%, 50% 50%, 50% 50%;
    -moz-background-size: 14px 14px, 50% 100%, 50% 50%, 50% 50%;
    background-size: 140px 14px, 50% 100%, 50% 50%, 50% 50%;
    background-position: 100% 0, 0 0, 100% 100%, 100% 0;
    background-repeat: no-repeat;
}

.pseudos {
    background:
        -webkit-linear-gradient(50deg,  rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        -webkit-linear-gradient(135deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
        -webkit-linear-gradient(225deg, transparent 10px,  rgba(255,0,0,0.4) 10px);
    background:
    ...