如何有一个弯曲的边缘三角形

Question

我想在css3中有一个弧形边缘traingle。是否有可能在css3中获得它？ 我下面的代码有一个正常的三角形...

http://jsfiddle.net/dVbJr/

我想这样的..

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/