css - geometricas - Cómo dar una forma div oval?

triangulo css border

Question

Probé mucho en forma ovalada, que he cortado en ambos lados pero no he podido hacerlo, por favor

Necesito el código de forma oval con corte en ambos lados ...

Aquí está mi código a continuación:

.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

Cambiar los valores en 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 2

Esta bien ?

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 3

Ponlo dentro de otro div que sea lo suficientemente alto como para mostrar todo el óvalo, no lo suficientemente ancho, y desbordamiento establecido: oculto. Si está posicionado en el centro, los bordes se cortarán, pero no podrá desplazarse lateralmente.

Answer 4

Prueba esto:

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

Observe las relaciones en los valores de las esquinas en relación con la altura.

Demo - http://jsfiddle.net/XDLVx/

Answer 5

Aquí hay dos variantes posibles:

Método n. ° 01:

Use 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étodo # 02:

1. Cree una superposición con :before o :after pseudo element.
2. Agregar border-radius .
3. Aplique una box-shadow grande con overflow: hidden en el elemento primario para ocultar el área no deseada.

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>