Curved sail shape using HTML and CSS only?

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?

---

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/

---

我们可以使用radial-gradient()来绘制这个形状：

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>

链接地址: http://www.djcxy.com/p/10628.html

上一篇: 隐藏DateTimePicker的文本和Usercontrol的大小

下一篇: 仅使用HTML和CSS的曲线帆形状？