css - 仅使用HTML和CSS的 flex 帆形状？

是否可以仅使用HTML和CSS在下面创建弯帆形状？

从this answer可以看到，我可以使用以下方式创建直帆:

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

关于css - 仅使用HTML和CSS的 flex 帆形状？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10025627/