Forme de voile incurvée en utilisant uniquement HTML et CSS ?

Question

Est-il possible de créer la forme de voile incurvée ci-dessous en utilisant uniquement HTML et CSS ?

Je peux voir de cette réponse que je pourrais utiliser pour créer une voile à bords droits :

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

ce qui ressemble à :

ou je peux m'approcher un peu plus avec le rayon de la bordure :

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

qui ressemble à ceci :

mais elle n'est pas aussi élégante que je le voudrais vraiment. L'image de la voile en haut a une courbe douce et élégante.

Puis-je faire mieux sans utiliser d'images ?

Answer 1

J'essaie de me débrouiller, c'est peut-être ce que vous voulez.

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

Vérifiez ceci http://jsfiddle.net/wtENa/

Answer 2

Nous pouvons utiliser radial-gradient() pour dessiner cette forme :

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>