linearly curved header at the bottom? - html

Question

Sorry for repeating this question similar to SO here: Can I create a div with a Curved bottom?
But method there does not fulfill my customization need of header.
But what i want to achieve is not quite similar to what i've achieve with the border border-bottom-left-radius and border-bottom-right-radius.
As you can see the images that header i want to achieve is linearly curved throughout the bottom but with what i've achieved is that i'm having more curvy border at the left and right portion of header and curved is not linear throughout the bottom. It becomes straight after short distance. I've tried to increase the %age but it becomes even more curved at edges.
Is there any other way of doing this so that i get linearly curved throughout the bottom?
Here is my code:
CSS Code:
header{
background-color: #000;
border-bottom-left-radius:25%;
border-bottom-right-radius:25%;
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
Here is the link JSfiddle link: https://jsfiddle.net/ozqneuha/
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* --Global CSS-- */
.header-container {
margin: 0 auto;
width: 1170px;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
background-color: #000;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
header nav ul {
list-style-type: none;
}
header .logo {
display: inline-block;
}
header .header-nav {
display: inline-block;
float: right;
padding: 7px;
}
header li {
float: left;
margin-left: 20px;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>

Answer 1

You could give clip-path a try, but make sure to check browser support.
Can I use CSS clip-path property
You basically just use an ellipse to clip your header div.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body {
margin: 0;
}
/* --Global CSS-- */
.header-container{
margin: 0 auto;
width: 1170px;
text-align: right;
}
ul{
padding: 0;
margin:0;
}
/* Header CSS*/
header{
background-color: #000;
/*
border-bottom-left-radius:25%;
border-bottom-right-radius:25%;
*/
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
min-height: 50px;
-webkit-clip-path: ellipse(60% 100% at 50% 0%);
clip-path: ellipse(60% 100% at 50% 0%);
}
header nav ul{
list-style-type: none;
}
header .logo {
display: inline-block;
float: left;
}
header .header-nav{
display: inline-block;
/*float: right;*/
padding: 7px;
}
header li{
float: left;
margin-left: 20px;
}
header li a{
color: #fff;
font: 600 16px 'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active{
color: #e51937;
text-decoration: none;
}
#media screen and (max-width: 1169px) {
.header-container {
width: 840px;
}
header .header-nav{
display: inline-block;
}
}
#media screen and (max-width: 996px) {
.header-container {
width: 100%;
}
header .logo {
float: none;
display: block;
text-align: center;
}
header .header-nav{
display: none;
}
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo" />
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search</li>
<li>Map</li>
<li>Properties</li>
<li>Parking</li>
<li>Residents</li>
<li>Pay Online</li>
</ul>
</nav>
</div><!-- /.header-nav -->
</div><!-- /.header-container -->
</header>

Answer 2

Can you try this way?
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* --Global CSS-- */
.header-container {
margin: 0 auto;
width: 1170px;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
background-color: #000;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
padding: 10px 10px 35px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
header nav ul {
list-style-type: none;
}
header .logo {
display: inline-block;
}
header .header-nav {
display: inline-block;
float: right;
padding: 7px;
}
header li {
float: left;
margin-left: 20px;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>

Answer 3

This is how I did it:
.overlay {
position: absolute;
z-index: -1;
height: 100%;
border-radius: 50%;
width: 150%;
left: -25%;
top: -60%;
background: rgba(121, 121, 121, 0.8);
pointer-events:none;
}
Here is the JSFiddle demo
Adjust the width, left and top percentage to your liking :)

Answer 4

I've finally figured out out the solution of this problem. I've used pesudo class :before for the solution.
/* --Global CSS-- */
.header-container {
display: table;
margin: 0 auto;
width: 1170px;
height: 100%;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
padding: 10px;
position: fixed;
width: 100%;
z-index: 1000;
}
header:before {
background-color: rgba(0, 0, 0, 0.35);
width: 150%;
content: '';
height: 150px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
top: -76px;
position: absolute;
z-index: -1;
margin-left: -25%;
}
header ul {
list-style-type: none;
}
header .logo {
display: table-cell;
vertical-align: middle;
}
header .header-nav {
display: table-cell;
float: right;
padding: 7px;
vertical-align: middle;
}
header li {
display: inline-block;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
padding: 0 15px 0 15px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>