frecce arrotondati con i CSS

Question

Eventuali duplicati:
How to create a triangle in CSS3 using border-radius

Sono possibile fare con i CSS?

freccia normale:

.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/)

freccia arrotondata (voglio solo il lato inferiore arrotondato):

:(

Answer 1

Sì, è possibile! È rotate la scatola, dargli un border-radius e utilizzare uno linear-gradient come 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%); 

} 

Se si desidera che l'angolo della freccia di essere diversi, allora si può anche skew esso.

Prendere in considerazione il fatto che questa volta CSS gradients are not supported by IE9 (non sto dicendo "o più vecchio" perché si parla di CSS3 tra i tag). In tal caso, la soluzione sarebbe utilizzare uno sfondo solido e in qualche modo assicurarsi che la parte superiore non venga mostrata, coprendola con un elemento precedente o ritagliandola (vedere the answer Tim Medora fornito).

Inoltre, a questo punto non v'è ancora alcun supporto per la sintassi senza prefisso (anche se questo cambierà presto: D), per cui sarà necessario o aggiungere manualmente i prefissi -webkit-, -moz- e -o-. (Non li ho aggiunti nella demo perché Dabblet utilizza -prefix-free che si occupa di fare ciò.)

Answer 2

Ecco un modo per farlo posizionando un quadrato ruotato all'interno di una scatola per controllare il ritaglio. Personalmente, penso che la soluzione di @ Ana sia molto più pulita.

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>