曲帆形使用HTML和CSS只？(Curved sail shape using HTML and C

是否有可能创建下面使用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;
}

它看起来像这样：

但是是不是很优雅，我想真的。 顶部帆图像有给它的温柔，优雅的曲线。

我可以在不使用图像做的更好？

Answer 1:

我尽我自己可能这就是你想要的。

.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/

Answer 2:

我们可以使用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> 

文章来源: Curved sail shape using HTML and CSS only?