I need to create the bluey/green area that is shown in the picture below. It has angled sides coming down to a point that has a slight curve.
What is the best way to achieve this using CSS? I need to support IE9+ or IE10+ if IE9 support is not possible.
I have started a basic demo here - (Don't need the content within the bluey-green area)
Here's my attempt with css only:
.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;
}
You can also consider using an svg graphic.