Обратный овал в CSS

Question

Как я могу сделать обратный овал в CSS как на изображении (слой)?

Я хочу нижний колонтитул на веб-странице. Начальная позиция: снизу: 0px; справа: 0px;

Это мой тест, но он плохой.

.inverseoval{
background-color: #ff3300;
     display: inline-block;
     margin-left: 20px;
     height:30px;
     width:400px;
     border: 3px solid #000000;
     border-width: 0 1px 1px 1px;
     border-radius: 50% / 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}

<div class="inverseoval"></div>

Answer 1

Вы можете попробовать что-то с псевдоэлементами, такими как :before, Другое решение было бы с SVG, но я сделал ответ только с :before элемент.

Добавьте это к inverseoval разделить и сформировать его и расположить его так, как вы хотите.

Будьте осторожны, чтобы дать то же самое background-color Для content,

.content {
  height: 200px;
  background: black;
  padding-bottom: 50px;
}

.inverseoval {
  height: 100px;
  background: red;
  position: relative;
  overflow: hidden;
}

.inverseoval:before {
  position: absolute;
  top: -20px;
  left: 0;
  content: "";
  height: 80px;
  width: 100%;
  transform: rotate(-2deg);
  background-color: black;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

<div class="content">

</div>
<div class="inverseoval"></div>