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

发布时间：2020-12-14 18:37:16 所属栏目：资源来源：网络整理

导读：是否可以仅使用 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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!