css - 添付画像のようにCSSでカットオフするにはどうすればいいですか？

Question

CSS3 を使用してこのスタイルを作成するにはどうすればよいですか? 角を丸くする方法は知っていますが、ここでも添付の画像に示すように小さなカットオフを設計する必要があります. どうすればこれを作ることができますか？

Answer 1

誤解していなければ…簡単な例です。

例: http://jsfiddle.net/JJ8ZB/7/

.cnt{ 
    background-image: url('myimage');
    background-repeat:none;
    background-color:#xxxxxx;
}

.ff, .ss{
    border-radius:x px;

}
.ff{
    border-bottom-right-radius: 0px;
}
.ss{
    border-top-right-radius: 0px;
    height:x px;
}​

<div class="cnt">
    <div class="ff">Latest news....</div>
    <div class="ss">Click here...</div>
</div>