How do you make a div shaped like a quarter of an ellipse in CSS?

Question

So, how do you make a div that's shaped like the bottom-left quarter of an ellipse in CSS3?

CSS3 supports rounded corners, but there is no obvious way to make a div shaped like a quarter of an ellipse.

The height of the div is supposed to be 50px, and the width is supposed to be 25% of the screen.

Answer 1

To start, the shape you're describing might not always be an ellipse. Depending on the screen size, the 25% width might result in a circle.

That said, here's a simple quarter-ellipse with just a few lines of CSS. The important CSS property being the border-bottom-left-radius: 100%.

div {
  height: 50px;
  width: 25%;
  background-color: red;
  border-bottom-left-radius: 100%;
}

<div></div>

Answer 2

Maybe simply using border-radius like this :

.box {
  height: 50px;
  width: 25%;
  background: blue;
  border-radius: 0 0 0 100%;
}

<div class="box">
</div>

Here is another fancy way using radial-gradient and the ellipse value:

.box {
  height: 50px;
  width: 25%;
  background-image: radial-gradient(ellipse at top right, red 68%, transparent 70%);
}

<div class="box">
</div>