Apologies for asking a question similar to one on SO: Can I create a div with a curved bottom?
The solution provided there does not meet my specific customization requirements for the header. Instead, I am looking to achieve something different from what I have already accomplished using the border properties here and here.
In the images, you can see that the header design I aim for has a linear curve throughout the bottom, whereas my current implementation results in a more curved border at the edges with the curve not being consistent along the entire bottom. Increasing the percentage only exaggerates the curvature at the edges.
Is there an alternative method to achieve a consistent linear curve throughout the bottom of the header?
Here is my existing code snippet:
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;
}Link to JSfiddle with the CSS code:
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><a href="#">Search</a>
</li>
<li><a href="#">Map</a>
</li>
<li><a href="#">Properties</a>
</li>
<li><a href="#">Parking</a>
</li>
<li><a href="#">Residents</a>
</li>
<li><a href="#">Pay Online</a>
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>