web-dev-qa-db-fra.com

Comment donner une forme ovale div?

J'ai beaucoup essayé la forme ovale qui a coupé des deux côtés mais pas capable de le faire s'il vous plaît enter image description here

J'ai besoin de code pour la forme ovale avec une coupe dans les deux côtés ..

Voici mon code ci-dessous: -

.demo{
    width: 100%;
    height: 600px;
    background: white;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 178px;
    border-radius: 694px / 208px;

    z-index: 100;
    position: relative;
    }
csscss3css-shapes
11
Anudeep

Est-ce correct ?

HTML

<div id="oval_parent">
    <div id="oval"></div>
</div>

CSS

#oval_parent{
    background:black;
    width:200px;
    height:120px;
    overflow:hidden;
}

#oval{
    width: 220px;
    height: 100px;
    margin:10px 0 0 -10px;  
    background: white;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

D&EACUTE;MO .

18
The Alpha

Essaye ça:

#oval-shape {
    width: 200px;
    height: 100px;
    background: blue;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

Notez les rapports dans les valeurs de coin par rapport à la hauteur.

Démo - http://jsfiddle.net/XDLVx/

3
boz

Changer les valeurs sur css:

#demo {
    width: 100%;
    height: 600px;
    background: white;
    -moz-border-radius: 50% / 250px;
    -webkit-border-radius: 40% / 250px;
    border-radius: 50% / 250px;

    z-index: 100;
    position: relative;
}
1
Kedume

Voici deux variantes possibles:

Méthode n ° 01:

Utilisez radial-gradient() :

background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);


body {
  background: linear-gradient(orange, red);
  padding: 0 20px;
  margin: 0;
}
.oval {
  background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
  height: 100vh;
}
<div class="oval">

</div>

Méthode n ° 02:

  1. Créez une superposition avec le pseudo-élément :before ou :after.
  2. Ajoutez border-radius.
  3. Appliquez un box-shadow grand avec overflow: hidden sur le parent pour masquer la zone non souhaitée.

body {
  background: linear-gradient(orange, red);
  padding: 0 20px;
  margin: 0;
}
.oval {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.oval:before {
  box-shadow: 0 0 0 500px #000;
  border-radius: 100%;
  position: absolute;
  content: '';
  right: -10%;
  left: -10%;
  top: 10%;
  bottom: 10%;
}
<div class="oval">

</div>

0
Mohammad Usman

Placez-le dans un autre div assez haut pour montrer tout l'ovale, pas assez large, et définissez overflow: hidden. Si elle est positionnée au centre, les bords seront coupés, mais vous ne pourrez pas faire de défilement latéral.

0
MickMalone1983