Rounded arrows with CSS [duplicate]

Question

Possible Duplicate:
How to create a triangle in CSS3 using border-radius

Are they possible to make with CSS?

Normal arrow:

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

Rounded arrow (I want only the bottom side rounded):

:(

Answer 1

Yes, it is possible! You rotate the box, give it a border-radius and use a 45deg linear-gradient as a 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%);

}

If you want the angle of the arrow to be different, then you can also skew it.

Take into account the fact that CSS gradients are not supported by IE9 (I am not saying "or older" this time because you mention CSS3 among your tags). The solution in that case would be to use a solid background and to somehow make sure the upper part won't show, either by covering it with a preceding element, or by clipping it (see the answer Tim Medora provided).

Also, at this point there is still no support for the unprefixed syntax (although this will soon change :D ), so you will need to either manually add the prefixes -webkit-, -moz-, and -o-. (I did not add them in the demo because Dabblet uses -prefix-free which takes care of doing this.)

Answer 2

Here's a way to do it by placing a rotated square inside a box to control clipping. Personally, I think @Ana's solution is much cleaner.

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;
}