仅使用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;
}
看起来像这样：
但并不像我想要的那么优雅。 顶部的风帆图像具有温和优雅的曲线。
如果不使用图像，我可以做得更好吗
我尝试我的自我可能是你想要的。
.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;
}
检查这个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>