Как сделать овал в css?

Я хочу сделать овал вроде:

Но когда я использовал этот код:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <style type="text/css">
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 40px;
            }
        </style>
    </head>
    <body>
        <div class="oval"></div>
    </body>
</html>

Это дает мне следующее:

Чтобы создать круг, он работает, но не овальный.

Ответы

Ответ 1

Все, что вам нужно сделать, это изменить border-radius: 40px на border-radius: 50%.

.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}

<div class="oval"></div>

Ответ 2

Вам нужно установить радиус границы в процентах:

Процент: Обозначает размер радиуса окружности или полумассивные и полуосновные оси многоточия, используя процент значения. Процент для горизонтальной оси относится к ширине поле, проценты для вертикальной оси относятся к высоте коробки. Отрицательные значения недействительны.

источник: MDN

Подробное объяснение того, почему значения пикселей для border-radius не могут выводить овальную форму, см. Граница границы в процентах (%) и пикселях (px)

Пример:

border-radius: 50%;

 .oval {
   width: 160px;
   height: 80px;
   background: #a84909;
   border-radius: 50%;
 }

<div class="oval"></div>

Ответ 3

используйте процент в качестве граничного радиуса, например: border-radius: 50%;.

Ответ 4

Попробуйте следующее:

     .oval {
            width: 160px;
            height: 80px;
            background: #a84909;
            moz-border-radius: 80px / 40px;
            webkit-border-radius: 80px / 40px;
            border-radius: 80px / 40px;
            }

PS. У меня нет компилятора передо мной, поэтому может быть небольшая ошибка.

Ответ 5

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>Oval</title>
        <style type="text/css">
            .oval {
                width: 160px;
                height: 80px;
                background: #a84909;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div class="oval"></div>
    </body>
</html>

Другой способ мышления объясняется здесь.

Ответ 6

Все предыдущие ответы, Он не хочет круга по своему вопросу. Он хочет Овал. Это работает, но, вероятно, лучший способ.

#oval{position:relative;background-color:green;width:20px;height:100px;  
  display:inline-block;z-index:100;
  }
#one{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:100px;}
#two{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:-100px;}

<div id="one">&nbsp;</div><div id="oval">&nbsp;</div><div id="two">&nbsp;</div>

Ответ 7

.oval {
  width: 10px;/*change here*/
  height: 157px;/* or here if you want to be more sharper*/
  border-radius: 50%;
  background: #1abc9c;
}

<div class="oval"></div>