Zaokrąglone strzałki z CSS

Question

Powiel możliwe:
How to create a triangle in CSS3 using border-radius

Są one możliwe, aby z CSS?

Normal strzałka:

.some_element:after{  
    content: ''; 
    height: 0; 
    width: 0; 
    position: absolute;   
    top: 0; 
    left: 0;  
    border: 100px solid transparent; 
    border-top-color: #000;   
} 

(http://jsfiddle.net/W3xwE/)

Zaokrąglone strzałka (Chcę tylko dolna strona zaokrągleniu):

:(

Answer 1

Tak, to jest możliwe! Ty rotate pole, daj mu border-radius i użyj 45deglinear-gradient jako background.

DEMO

HTML:

<div class='arrow'></div> 

CSS:

.arrow { 
    width: 7em; 
    height: 7em; 
    border-radius: 0 0 2em 0; 
    margin: 5em; 
    transform: rotate(45deg); 
    background: linear-gradient(-45deg, black 50%, transparent 50%); 

} 

Jeśli chcesz kąt strzałki być inaczej, to można również skew to.

Weź pod uwagę fakt, że CSS gradients are not supported by IE9 (Tym razem nie mówię "starszy", ponieważ wspomniałeś o CSS3 wśród tagów). Rozwiązaniem w takim przypadku byłoby użycie solidnego tła i upewnienie się, że górna część nie pojawi się, albo przez pokrycie go poprzednim elementem, albo przez przycięcie go (patrz the answer Tim Medora).

Również w tym momencie nadal nie ma wsparcie dla składni bez prefiksu (choć będzie to wkrótce zmienić: D), więc trzeba będzie ręcznie dodać przedrostki -webkit-, -moz- i -o-. (Nie dodałem ich w demie, ponieważ Dabblet używa -prefix-free, który dba o to.)

Answer 2

Oto sposób na zrobienie tego poprzez umieszczenie obróconego kwadratu wewnątrz pudełka, aby kontrolować obcinanie. Osobiście uważam, że rozwiązanie @ Ana jest znacznie czystsze.

http://jsfiddle.net/K44mE/14/

<div id="outer"><div id="inner">&nbsp;</div></div> 

#inner{ 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
    background-color:silver; 
    width:100px; 
    height:100px; 
    top: -70px; 
    left: 20px; 
    position:relative; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 

#outer { 
    position: absolute; 
    width: 140px; 
    height: 70px;  
    top:10px; 
    left:10px; 
    overflow: hidden;  
    border: 1px solid red; 
} 

Answer 3

CSS

.arrow { 
     width: 7em; 
     height: 7em; 
     border-radius: 0 0 2em 0; 
     margin: -2em 2.5em; 
     transform: rotate(45deg); 
     background: linear-gradient(-45deg, black 50%, transparent 50%); 

    } 

HTML

<div class='arrow'></div>