flechas redondeadas con CSS

Question

Duplicar posibles:
How to create a triangle in CSS3 using border-radius

Son posible hacer con CSS?

flecha normal:

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

flecha redondeada (quiero solamente el lado inferior redondeado):

:(

Answer 1

Sí, ¡es posible! Usted rotate la caja, déle un border-radius y use 45deglinear-gradient como 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%); 

} 

Si desea que el ángulo de la flecha a ser diferente, entonces también puede skew ella.

Ten en cuenta el hecho de que CSS gradients are not supported by IE9 (no estoy diciendo "o más viejo" esta vez porque mencionas CSS3 entre tus etiquetas). La solución en ese caso sería usar un fondo sólido y de alguna manera asegurarse de que la parte superior no se muestre, ya sea cubriéndolo con un elemento precedente o recortándolo (consulte the answer Tim Medora provisto).

También, en este momento todavía no hay soporte para la sintaxis sin prefijo (aunque esto cambiará pronto: D), por lo que tendrá que o bien agregar manualmente los prefijos -webkit-, -moz- y -o-. (No los agregué en la demostración porque Dabblet usa -prefix-free que se encarga de hacer esto.)

Answer 2

Aquí hay una manera de hacerlo colocando un cuadrado girado dentro de una casilla para controlar el recorte. Personalmente, creo que la solución de @ Ana es mucho más limpia.

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>