-1

A similar question has been asked here but with no solution.

I am trying to get the header to look like the image below, I tried using radius but that gives a rounder bottom. I am not sure how I can have it so the bottom is inverted in.

  height: 100vh;
  width: 100vh;
  border-radius: 50%;

enter image description here

coding1223322
  • 461
  • 11
  • 26
  • 2
    Can you please post what you tried, and how it is not working? – P.M Jul 21 '22 at 14:30
  • It's unclear what your question is asking for, and we can't tell where you are falling short because you have not included an [mcve]. Do you mean you want to have a yellow page background and you want to give the header a white background, and for some reason you want the header to be the element that controls the shape of the background shown behind the paragraph of lorem ipsum text? If so, why? Why not just have a white background and apply a normal border radius on the yellow background of the paragraph? – TylerH Jul 25 '22 at 15:53

1 Answers1

-1

There is no straightforward way to apply an inverted border-radius to the bottom of the <header> element.

Instead, a different approach to achieve this effect is to:

  • apply border-radius to the <main> element, beneath the <header>
  • use transform: translateY() to move <main> upwards, such that it overlaps <header>

Working Example:

body {
  margin: 12px 48px;
  background-color: rgb(234, 235, 239);
}

header {
  display: block;
  height: 140px;
  padding: 6px 0 180px;
  text-align: center;
  font-weight: 900;
  background-color: rgb(255, 255, 255);
}

main {
  display: block;
  background-color: rgb(255, 222, 89);
  padding: 100px 24px 24px 24px;
  border-radius: 70% 70% 0 0;
  transform: translateY(-240px);
}

main p {
  padding: 0 36px;
  line-height: 24px;
  transform: translateY(-48px);
}
<header>
<h1>Welcome back!</h1>
</header>

<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</main>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • why did you reopen a perfect duplicate? – Temani Afif Jul 25 '22 at 08:51
  • *There is no straightforward way to apply an inverted border-radius to the bottom* --> there are a lot of ways in the duplicate I have used in case you didn't check them – Temani Afif Jul 25 '22 at 08:57
  • You need to familiarize yourself with the concept of Duplicate Question. What you have done will not benefit anyone because you simply "erased" the links I made to questions that contain MANY solutions to this problem to only keep your answer that doesn't really solve the issue (you result is far from the one asked). If you have another solution you should add it to the duplicate, not reopen the question. – Temani Afif Jul 25 '22 at 09:15
  • *There are no straightforward ways if CSS is not your forte and you need a quick and easy pre-intermediate solution in CSS* --> note that my answer has more than 35 upvotes which is a clear indication that it was helpful to many users before. People come here because CSS is not their forte to learn new answers. You are preventing this by reopening the question. Asking a good question doesn't mean that it cannot be closed as duplicate. Duplicate is not a punishment, it's a way to answer good questions – Temani Afif Jul 25 '22 at 09:20