I need to create a responsive ellipse with SCSS like this ellipse:

The height should be always 72px and also be responsive

This is a mockup of how it should look like:

At the moment my code looks like this

It looks like this current ellipse but it's not as "narrow" and "pointy" as it should be

<div className="landing-bg__ellipse" />

.landing-bg__ellipse {
  width: 100%;
  height: 4.5rem;
  background-color: #95cf9d;
  border-radius: 50% 50% 0 0;
}

I need to create a responsive ellipse with SCSS like this ellipse:

The height should be always 72px and also be responsive

This is a mockup of how it should look like:

At the moment my code looks like this

It looks like this current ellipse but it's not as "narrow" and "pointy" as it should be

<div className="landing-bg__ellipse" />

.landing-bg__ellipse {
  width: 100%;
  height: 4.5rem;
  background-color: #95cf9d;
  border-radius: 50% 50% 0 0;
}

• html
• css
• sass

Share Improve this question Follow edited Mar 21 at 0:00 Mister Jojo 22.5k66 gold badges2525 silver badges4444 bronze badges asked Mar 20 at 23:21 KamilKamil 344 bronze badges 1

• The "pointier"-ness makes this neither a circle nor an ellipse – Sean Commented Mar 21 at 16:52

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

To create a half ellipse, you can use border-top-left-radius and border-top-right-radius. You can control the rounding arc on each corner, in your case, you need to create an arc of ellipse.

You can refer the MDN web docs about border-top-left-radius. It explains how rounding corners works.

The rounding can be a circle or an ellipse, or if one of the value is 0, no rounding is done and the corner is square.

You can read about border-top-right-radius, the explanation is same border-top-left-radius

Run the code snippet below to see the result, this is the closet to what asked for. Responsive and with fixed height. See it on full page and resize the window.

*, *:after, *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.landing-bg__ellipse {
  width: 100%;
  height: 4.5rem;
  background-color: #95cf9d;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

<div class="landing-bg__ellipse" />

This is an example uses a container and changes the position and scale of the element.

*, *:after, *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 4.5rem;
  overflow: hidden;
}

.landing-bg__ellipse {
  transform: translateY(50%) scale(1.15);
  width: 100%;
  height: 4.5rem;
  background-color: #95cf9d;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

<div class="container">
  <div class="landing-bg__ellipse" />
</div>