Изогнутая форма паруса с использованием только HTML и CSS?

Можно ли создать изогнутую форму паруса, показанную ниже, используя только HTML и CSS?

Из этого ответа я вижу, что я мог бы создать парус с прямыми-боками, используя :

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

, который выглядит как :

, или я могу немного приблизиться с радиусом границы :

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

, который выглядит вот так :

, но не так элегантно, как хотелось бы. Изображение паруса вверху имеет нежный, элегантный изгиб.

Могу ли я добиться большего успеха без использования изображений?