我需要创建如下图所示的蓝色/绿色区域.它有倾斜的边缘下降到一个略有曲线的点.
使用CSS实现这一目标的最佳方法是什么？如果无法支持IE9,我需要支持IE9或IE10.
解决方法
这是我对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;
}
您还可以考虑使用svg图形.
