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;
}
これは次のようになります:
しかし、私が本当に望んでいるほどエレガントではありません。上部の帆のイメージは、穏やかでエレガントな曲線を描いています。
画像を使わずにもっとうまくやれるでしょうか?