[解決済み] エレメントの角を面取りする方法を教えてください。

質問内容

ある要素の角を基本的に切り落としたい。この要素の背景は無地ですが、親要素の背景は画像です。この要素の高さは不明です。CSSのborder-radiusプロパティは丸め込んでしまうので、役に立ちません。見つけたのは jQueryプラグイン しかし、背景画像については考慮されていません。

解決方法は？

欲しいのはこれです。 http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

すべてCSSで。

div {
    background: #c00; /* fallback */
    background:
        -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -o-linear-gradient(135deg, transparent 10px, #c00 10px),
        -o-linear-gradient(225deg, transparent 10px, #c00 10px),
        -o-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}

div, div.round {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

/* Ignore the CSS from this point, it's just to make the demo more presentable */
body {
    background: #444 url('http://leaverou.me/ft2010/img/darker_wood.jpg') bottom;
    font-family: sans-serif;
}

div {
    width: 500px;
    margin:15px auto;
    padding:13px 15px;
    color: white;
    line-height:1.5;
}

p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}