Как дать овальную форму div?

Я много пробовал овальную форму, которая разрезалась с обеих сторон, но не могла это сделать

Мне нужен код для овальной формы с разрезом в обе стороны.

Здесь мой код ниже: -

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

Ответ 1

Это нормально?

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.

Ответ 2

Попробуйте следующее:

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

Обратите внимание на отношения в значениях угла по отношению к высоте.

Демо - http://jsfiddle.net/XDLVx/

Ответ 3

Измените значения на 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;
}

Ответ 4

Поместите его в другой div, который достаточно высок, чтобы показать весь овал, не достаточно широкий, и установить переполнение: скрыто. Если он расположен в центре, края будут обрезаны, но вы не сможете прокручивать по бокам.

Ответ 5

Вот два возможных варианта:

Метод # 01:

Используйте 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>