border-radius: 50% and transform: rotate(-10deg) are what you’re looking for.

div {
  height: 200px;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-10deg);
  border: 1px solid;
  background: #e1ecf4;
}

<div></div>

You can do this with clip-path, but you will likely need to use a custom path rather than a simple shape since these are drawn off axis. Alternately, you may be able to get away with doing a clip-path: ellipse(…) and then transform: rotate(…) on the div, then another transform: rotate(…) with the opposite value on the contents to keep them aligned horizontally.

The steps are the following:

1. First we have an ordinary, rectangular DIV (let it be 32px in this example):

#example {
  width: 32px;
  height: 32px;
  background-color: red;
}

2. With the border-radius property, we effectively convert it to a circle. The trick is that if we give it a 16px border-radius, we get a circle:

#example {
  width: 32px;
  height: 32px;
  background: red;
  border-radius: 16px;
}

3. After that, with the transform: css-property we stretch it in a single direction. transform: scaleX(...) can stretch a div horizontally.

#example {
  width: 32px;
  height: 32px;
  background-color: red;
  border-radius: 16px;
  transform: scaleX(3.14);
}

And done.

To get a rotated ellipse, you need 2 divs, or a matrix-based css-transform, to combine rotation and stretching.

I am trying to make the following shapes with css. I don’t know how I can do this, can you help?