css - 曲線エッジの三角形を作成する方法

Question

css3 で曲線エッジの三角形が欲しかったのですが、css3 で取得することは可能ですか? 以下の私のコードには通常の三角形があります...

http://jsfiddle.net/dVbJr/

#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid orange;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

こういうのが欲しかった..

Answer 1

次のようにできます。

CSS

.arrow{
    width:50px;
    height:100px;
    position:relative;
    overflow:hidden;
}
.arrow:after{
    content:'';
    width:100px;
    height:100px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    background:red;
    position:absolute;
    top:0;
    right:-70px;
    border-radius:10px;
    -moz-border-radius:10px;
}

HTML

<div class="arrow"></div>

これをチェックしてくださいhttp://jsfiddle.net/dVbJr/4/