如何有一個彎曲的邊緣三角形

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/