Curved sail using only HTML and CSS?

Question

Is it possible to create a curved sail shape using only HTML and CSS?

I see from this answer that I could create a straightforward sail using:

#triangle { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 100px solid red; } 

which is as follows:

or I can get a little closer to the border radius:

 #sail { background: #ff0000; width: 50px; height: 100px; border-top-right-radius: 50px 100px; -moz-border-radius-topright: 50px 100px; -webkit-border-top-right-radius: 50px 100px; -khtml-border-radius-topright: 50px 100px; } 

which is as follows:

but not as elegant as I would like. The image of the sail on top has a gentle, graceful curve.

Can I work better without using images?

Answer 1

I try myself, maybe what you want.

 .sail{ width: 50px; height: 100px; position:relative; overflow:hidden; } .sail:after{ width:200px; height:200px; content:''; position:absolute; right:0; top:-5px; -moz-border-radius:100px; border-radius:100px; background: #ff0000; } 

check out http://jsfiddle.net/wtENa/

Answer 2

We can use radial-gradient() to draw this shape:

 div { background: radial-gradient(200px at -50px 100%, red 50%, transparent 50%); } 

 div { background: radial-gradient(200px at -50px 100%, red 50%, transparent 50%); height: 100px; width: 50px; } 

 <div> </div>