我需要创建下图所示的蓝/绿色区域。它有倾斜的侧面，向下延伸至有轻微弯曲的点。
使用什么是实现此目的的最佳方法CSS？如果无法支持 IE9，我需要支持 IE9+ 或 IE10+。
我已经开始了基础的演示在这里 http://jsbin.com/quxohogohi/edit?html,css,output-（不需要蓝绿色区域内的内容）
这是我仅使用 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演示 http://jsbin.com/nufohexubi/1/edit?html,css,output
您还可以考虑使用 svg 图形。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
