html – 带有弯曲尖底的标题
发布时间:2020-12-14 22:29:14 所属栏目:资源 来源:网络整理
导读:我需要创建如下图所示的蓝色/绿色区域.它有倾斜的边缘下降到一个略有曲线的点. 使用CSS实现这一目标的最佳方法是什么?如果无法支持IE9,我需要支持IE9或IE10. 我已经开始了一个基本的demo here – (不需要蓝绿色区域内的内容) 解决方法 这是我对css的尝试:
我需要创建如下图所示的蓝色/绿色区域.它有倾斜的边缘下降到一个略有曲线的点.
使用CSS实现这一目标的最佳方法是什么?如果无法支持IE9,我需要支持IE9或IE10. 我已经开始了一个基本的demo here – (不需要蓝绿色区域内的内容) 解决方法
这是我对css的尝试:
.header { background: #415d67; height: 150px; position: relative; z-index: 1; } .header:after { position: absolute; content: ""; background: #415d67; width: 50%; bottom: -20px; right: 0; height: 100%; transform: skewY(-5deg); transform-origin: right; border-bottom-left-radius: 50px; padding-right: 44px; z-index: -1; } .header:before { position: absolute; content: ""; background: #415d67; width: 50%; bottom: -20px; left: 0; height: 100%; transform: skewY(5deg); transform-origin: left; border-bottom-right-radius: 50px; padding-left: 44px; z-index: -1; } .content { background: white; padding: 20px; padding-top: 100px; } JSBIN demo 您还可以考虑使用svg图形. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |