仅使用HTML和CSS的弯曲帆形状？

概述是否可以仅使用 HTML和CSS创建下面的弯曲帆形状？ 我可以从this answer看到我可以使用以下方法创建一个直边帆： #triangle { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 100px solid red;} 看起来像： 或者我可以更接近边界 是否可以仅使用 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/

总结

以上是内存溢出为你收集整理的仅使用HTML和CSS的弯曲帆形状？全部内容，希望文章能够帮你解决仅使用HTML和CSS的弯曲帆形状？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。