web-dev-qa-db-fra.com

comment faire un ovale en css?

Je veux faire un ovale comme:

enter image description here

Mais quand j'ai utilisé ce code:

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

Cela me donne ceci:

enter image description here

Pour faire un cercle, cela fonctionne, mais pas un ovale.

htmlcsscss-shapes
23
rachid

Tout ce que vous avez à faire est de changer border-radius: 40px à border-radius: 50%.

.oval {
  width: 160px;
  height: 80px;
  background: #a84909;
  border-radius: 50%;
}
<div class="oval"></div>
22
Ali Aboussebaba

Vous devez définir le rayon de la bordure en pourcentage:

Pourcentage: indique la taille du rayon du cercle, ou les axes semi-majeurs et semi-mineurs des points de suspension, en utilisant des valeurs de pourcentage. Les pourcentages pour l'axe horizontal se réfèrent à la largeur de la boîte, les pourcentages pour l'axe vertical se réfèrent à la hauteur de la boîte. Les valeurs négatives ne sont pas valides.

source: MDN

Pour une explication détaillée des raisons pour lesquelles les valeurs de pixels pour border-radius ne peuvent pas produire une forme ovale, voir Border-radius en pourcentage (%) et pixels (px)

Exemple :

border-radius: 50%;

 .oval {
   width: 160px;
   height: 80px;
   background: #a84909;
   border-radius: 50%;
 }
<div class="oval"></div>
5
web-tiki

utilisez un pourcentage comme rayon de bordure, comme: border-radius: 50%;.

1
delbertooo

Essaye ça:

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

PS. Je n'ai pas le compilateur devant moi, il peut donc y avoir une erreur mineure.

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

Une autre façon de penser est expliquée ici .

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

Si vous voulez plus de formes, vous pouvez les générer en utilisant

http://enjoycss.com/code/
1
Bogdan Alexandru Militaru

Toutes les réponses précédentes, il ne veut pas de cercle selon sa question. Il veut un ovale. Cela fonctionne, mais il existe probablement un meilleur moyen.

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