Wie mache ich ein Oval in CSS?

Ich möchte ein Oval wie machen:Wie mache ich ein Oval in CSS?

enter image description here

Aber wenn ich diesen Code verwendet:

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

Es gibt mir dies:

enter image description here

Um ein Kreis funktioniert, aber ein Oval nicht.

Quelle

2014-11-16 rachid

Alles, was Sie tun müssen, ist border-radius: 40px zu border-radius: 50% zu ändern.

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

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

Quelle

2014-11-16 19:48:05

Sie müssen den Grenzradius in Prozent einzustellen:

Anteil: die Größe des Kreisradius bedeutet, oder die großen Halb und kleine Halbachsen der Ellipsen, Prozentsatz mit Werten. Prozentangaben für die horizontale Achse beziehen sich auf die Breite der Box , Prozentangaben für die vertikale Achse beziehen sich auf die Höhe der Box. Negative Werte sind ungültig.

Quelle: MDN

Eine detaillierte Erklärung, warum der Pixelwerte für die Grenzradius kann nicht ausgegeben eine ovale Form sehen Border-radius in percentage (%) and pixels (px)

Beispiel:

border-radius: 50%;

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

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

Quelle

2014-11-16 19:44:25

Verwenden Sie einen Prozentsatz als Grenzradius, wie: border-radius: 50%;.

Quelle

2014-11-16 19:44:55 delbertooo

Versuchen Sie folgendes:

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

PS. Ich habe den Compiler nicht vor mir, daher kann es einen kleinen Fehler geben.

Quelle

2014-11-16 19:45:29 FeliceM

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

Eine andere Art zu denken ist here erläutert.

Quelle

2014-11-16 19:45:42

Alle bisherigen Antworten, will er nicht einen Kreis nach seiner Frage. Er möchte ein Oval. Das funktioniert, aber es gibt wahrscheinlich einen besseren Weg.

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

Quelle

2014-11-16 19:50:23 Billy

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

Wenn Sie mehr Formen möchten, können Sie erzeugen diese mit

http://enjoycss.com/code/

Quelle

2016-05-28 19:08:54

Antwort

Verwandte Themen