How to make 3-corner-rounded triangle in CSS

Question

I\'d like to achieve a custom-colored shape like this using no Javascript:

Curren

Answer 1

Ana's answer inspired me to try another approach, one that's just as far from perfect, but is at least symmetrical. Here's a preview at real-size and blown up. It's simply a border-hack trangle wrapped in a clipping circle/border-radius:

And the code (adjust the overall size via single font-size property):

.triangle {
    font-size: .8em;
    position: relative;
    width: 3.8em;
    height: 3.8em;
    text-align: center;
    margin: 10% auto 0;
    overflow: hidden;
    border-radius: 100%;
} 
.triangle:before {
    content: '';
    position: absolute;
    width:0;
    height: 0;
    border: solid 2em transparent;
    border-bottom-color: orange;
    border-bottom-width: 3.2em;
    border-top-width: 0;
    margin: -.3em -2em;
}

Play with it here: http://dabblet.com/gist/4590714