What steps can be taken to create a curved bottom for the header section?

Question

What steps can be taken to create a curved bottom for the header section?

While I've seen this question asked before, I'm not satisfied with how the design has been implemented.

Here is my desired look for the curved header

I've experimented with border radius left and right, but the edges are excessively rounded for my taste.

Does anyone have suggestions on how to achieve the exact design shown in the picture? EDIT: I am aware that using border-radius is necessary, however, I do not want the corners to be too round. I am aiming for the precise look depicted in the linked image. I don't quite understand why this post is receiving downvotes.

html css

Answer 1

Answer №1

You can create a unique design using CSS by nesting div elements and applying different styles to them. By adjusting the sizing, colors, and overflow properties, you can achieve various effects like creating a curved arc at the bottom of an element. Experiment with the code snippet below to customize the appearance as desired.

By utilizing the border-radius property set to 50%, you can generate a smooth curve in the design. The key is to have the outer div much larger than its displayed size, allowing for a subtle arc effect.

.outer{
  width:500px;
  height:200px;
  background:white;
  position:relative;
  overflow:hidden
}

.inner{
  width:1000px;
  height:200px;
  background:#29465E;
  border-radius: 50%;
  position:absolute;
  left:-50%;
  top:-25%;
  overflow:visible
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 2

You can create a unique design using CSS by nesting div elements and applying different styles to them. By adjusting the sizing, colors, and overflow properties, you can achieve various effects like creating a curved arc at the bottom of an element. Experiment with the code snippet below to customize the appearance as desired.

By utilizing the border-radius property set to 50%, you can generate a smooth curve in the design. The key is to have the outer div much larger than its displayed size, allowing for a subtle arc effect.

.outer{
  width:500px;
  height:200px;
  background:white;
  position:relative;
  overflow:hidden
}

.inner{
  width:1000px;
  height:200px;
  background:#29465E;
  border-radius: 50%;
  position:absolute;
  left:-50%;
  top:-25%;
  overflow:visible
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 3

Answer №2

This is not a CSS property; rather, it's simply a background image being used.

Answer 4

This is not a CSS property; rather, it's simply a background image being used.

What steps can be taken to create a curved bottom for the header section?

Answer №1

Answer №2

Similar questions

What could be causing the mousedown event to go unrecognized in JavaScript when using THREE?

What is the best approach to transform an HTML textarea value into JSON format?

Displaying PHP errors in input fields

The navigation bar vanishes from sight while scrolling underneath other sections

What is the correct way to utilize window.scrollY effectively in my code?

Ways to ensure the first div always expands when sorting in AngularJS

Is your browser tab failing to display the complete URL?

Is it possible to submit a HTML5 form and have it displayed again on the same page?

Using Single Quotes as Parameters in JavaScript

The container's height is determined by the CSS top position of the last child element within the container, with a

Basic image slider featuring adjustable heights

Element in list displaying a distinct alignment from the rest

CSS - Layering new DIVs over existing DIVs

Modification in background when PNG image is hovered upon

Concealed upper TD boundary in IE 8

The -webkit-linear-gradient effect can lead to noticeable banding issues on Chrome and Safari browsers

Showcasing an image stored in an HTML file on a Vue.js webpage

Is it feasible to create a doughnut chart with curved edges?

Content within iframe is failing to load correctly on both Firefox and Internet Explorer browsers

What is the best way to align my clip-path's text with the center of the viewport and ensure that all of the clip-path's text is visible?