Comment donner à une div une forme ovale ?

Question

J'ai beaucoup essayé sur la forme ovale qui a été coupée sur les deux côtés mais je n'ai pas réussi à le faire, s'il vous plaît.

J'ai besoin d'un code pour une forme ovale avec une découpe des 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;
    }

Answer 1

Cela vous convient-il ?

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;
}

DEMO .

Answer 2

Essayez ça :

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

Remarquez les rapports entre les valeurs des angles et la hauteur.

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

Answer 3

Changez 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;
}

Answer 4

Placez-le à l'intérieur d'un autre div suffisamment haut pour afficher tout l'ovale, mais pas assez large, et définissez overflow : hidden. S'il est placé au centre, les bords seront coupés, mais vous ne pourrez pas faire défiler les pages.

Answer 5

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 :before o :after pseudo-élément.
2. Ajouter border-radius .

3. Appliquer un grand box-shadow con overflow: hidden sur le parent pour masquer la zone non désiré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>