come fare un ovale in css?

Voglio fare un ovale come:come fare un ovale in css?

enter image description here

Ma quando ho usato questo codice:

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

mi dà questo:

enter image description here

Per effettuare una Cerchio funziona, ma un ovale no.

fonte

2014-11-16 rachid

Tutto quello che dovete fare è cambiare border-radius: 40px a border-radius: 50%.

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

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

fonte

2014-11-16 19:48:05

È necessario impostare il raggio confine in percentuale:

Percentuale: Indica la dimensione del raggio del cerchio, o le semi-maggiori e minori semi-assi del ellissi, utilizzando come percentuale valori. Le percentuali per l'asse orizzontale si riferiscono alla larghezza della casella , le percentuali per l'asse verticale si riferiscono all'altezza della scatola. I valori negativi non sono validi.

fonte: MDN

Per una spiegazione dettagliata del motivo valori di pixel per border-radius non può emettere una forma ovale vedere Border-radius in percentage (%) and pixels (px)

Esempio:

border-radius: 50%;

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

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

fonte

2014-11-16 19:44:25

utilizzare una percentuale come raggio di confine, ad esempio: border-radius: 50%;.

fonte

2014-11-16 19:44:55 delbertooo

Prova questo:

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

PS. Non ho il compilatore davanti a me quindi potrebbe esserci qualche piccolo errore.

fonte

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>

Un altro modo di pensare è spiegato here.

fonte

2014-11-16 19:45:42

Tutte le risposte precedenti, che non vuole un cerchio secondo la sua domanda. Lui vuole un Ovale. Questo funziona ma probabilmente c'è un modo migliore.

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

fonte

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>

Se volete più forme, è possibile generare questi usando

http://enjoycss.com/code/

fonte

2016-05-28 19:08:54

come fare un ovale in css?

risposta

Problemi correlati