Reputation: 2493
I want to use CSS3 (not SVG) to be able to display a border similar to below
The html I need to use is:
<div class="header"></div>
with CSS the being:
.header {
position: relative;
height: 70px;
width: 100%;
background: #d3d3d3;
}
.header:before {
content: "";
display: block;
position: absolute;
border-radius: 0 0% 0% 100%;
width: 3%;
height: 70px;
background-color: #fff;
right: 0;
top: 0;
}
.header:after {
content: "";
display: block;
position: absolute;
border-radius: 0% 0% 100% 0%;
width: 3%;
height: 70px;
background-color: #fff;
left: 0;
top: 0;
}
This is partway there, but not exact. I've created a JSfiddle here: http://jsfiddle.net/7fjSc/1206/
Any ideas where I'm going wrong please?
Upvotes: 2
Views: 1335
Reputation: 288710
You can try border-radius
:
.header {
height: 70px;
background: #d3d3d3;
border-radius: 5em 5em 0 0 / 13em 13em 0 0;
}
<div class="header"></div>
Upvotes: 1