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

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

enter image description here

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

<!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>

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

enter image description here

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

+18
источник поделиться
7 ответов

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

.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}
<div class="oval"></div>
+15
источник

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

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

источник: MDN

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

Пример:

border-radius: 50%;

 .oval {
   width: 160px;
   height: 80px;
   background: #a84909;
   border-radius: 50%;
 }
<div class="oval"></div>
+5
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

+1
источник

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

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

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

+1
источник
<!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>

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

+1
источник

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

#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>
+1
источник

.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>

Если вы хотите больше фигур, вы можете сгенерировать их с помощью

http://enjoycss.com/code/
+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос