Curved sail shape using HTML and CSS only?

css, css-shapes, shapes

Solution

I try my self may be that's 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 this http://jsfiddle.net/wtENa/

Problem

Is it possible to create the curved sail shape below using HTML and CSS only? I can see from this answer that I could create a straight-sided sail using: ``` #triangle { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 100px solid red; } ``` which looks like: or I can get a bit closer with 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 looks like this: but isn't quite as elegant as I'd like really. The sail image at the top has a gentle, elegant curve to it. Can I do better without using images?

Original source

Related problems