Geek Answers Handbook

A linearly curved heading below?

Sorry to repeat this question similar to SO here: Can I create a div with a curved bottom?

But the method does not match my need for a header setting. But what I want to achieve is not quite like what I’m reaching with the border border-bottom-left-radius and border-bottom-right-radius .

As you can see, the images that the heading I want to achieve are linearly curved along the bottom, but with what I have achieved, it is that I have a more curved border on the left and right side of the heading and is curved not linear all over bottom. It becomes straight after a short distance. I tried to increase% of age, but it becomes even more curved around the edges.

Is there any other way to do this so that I get linear curvature along 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 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><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>
+4
source share
4 answers

I finally figured out a solution to this problem. I 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><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>
+1
source

You can try clip-path , but don't forget to check browser support.

Can I use the CSS clip property

Basically you use an ellipse to clip your div header.

 @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><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>
+2
source

Can you try this?

 @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><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>
+1
source

Here 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 daemon

Adjust percent width , left and top :)

+1
source

More articles:


All Articles