Могу ли я создать div с изогнутым дном?

CSS:

div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

посмотрите, подходит ли вам это: DEMO

Существуют различные подходы, которые могут быть приняты для создания этой формы. Ниже подробное описание возможностей:

Подходы на основе SVG:

SVG — рекомендуемый способ создания таких фигур. Он предлагает простоту и масштабируемость. Ниже приведены несколько возможных способов:

1- Использование элемента пути:

Мы можем использовать элемент path из SVG, чтобы создать эту фигуру и заполнить ее каким-нибудь сплошным цветом, градиентом или узором.

Только один атрибут d используется для определения форм в элементе path. Сам этот атрибут содержит ряд коротких команд и несколько параметров, необходимых для работы этих команд.

Ниже приведен необходимый код для создания этой формы:

<path d="M 0,0
         L 0,40
         Q 250,80 500,40
         L 500,0
         Z" />

Ниже приведено краткое описание path команд, используемых в приведенном выше коде:

• Команда M используется для определения начальной точки. Он появляется в начале и указывает точку, с которой должно начинаться рисование.
• Команда L используется для рисования прямых линий.
• Команда Q используется для рисования кривых.
• Команда Z используется для закрытия текущего пути.

Выходное изображение:

Рабочая демонстрация:

svg {
  width: 100%;
}

<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />
</svg>

2- Отсечение:

Обрезка означает удаление или скрытие некоторых частей элемента.

В этом подходе мы определяем область отсечения с помощью элемента SVG clipPath и применяем его к прямоугольному элементу. Любая область, которая находится за пределами области отсечения, будет скрыта.

Ниже приведен необходимый код:

<defs>
    <clipPath id="shape">
        <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
    </clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />

Ниже приведено краткое описание элементов, используемых в приведенном выше коде:

• Элемент defs используется для определения элемента/объектов для последующего использования в документе SVG.
• Элемент clipPath используется для определения области отсечения.
• Элемент rect используется для создания прямоугольников.
• Атрибут clip-path используется для связывания ранее созданного контура отсечения.

Рабочая демонстрация:

svg {
  width: 100%;
}

<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <defs>
    <clipPath id="shape">
      <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
</svg>

Подходы на основе CSS:

1- Использование псевдоэлемента:

Мы можем использовать псевдоэлемент ::before или ::after для создания этой формы. Шаги для его создания приведены ниже:

• Создайте слой с псевдоэлементом ::before ИЛИ ::after, ширина и высота которого больше, чем у его родителя.
• Добавьте border-radius, чтобы создать округлую форму.
• Добавьте overflow: hidden к родителю, чтобы скрыть ненужную часть.

Необходимый HTML-код:

Все, что нам нужно, это один элемент div, возможно, имеющий какой-то класс, например shape:

<div class="shape"></div>

Рабочая демонстрация:

.shape {
  position: relative;
  overflow: hidden;
  height: 80px;
}

.shape::before {
  border-radius: 100%;
  position: absolute;
  background: black;
  right: -200px;
  left: -200px;
  top: -200px;
  content: '';
  bottom: 0;
}

<div class="shape"></div>

2- Радиальный градиент:

В этом подходе мы будем использовать функцию radial-gradient() CSS3, чтобы нарисовать эту фигуру на элементе в качестве фона. Однако этот подход не дает очень четкого изображения и может иметь некоторые зазубренные углы.

Необходимый HTML-код:

Потребуется только один элемент div с некоторым классом, т.е.

<div class="shape"></div>

Необходимый CSS:

.shape {
  background-image: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%);
}

Рабочая демонстрация:

.shape {
  background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
  height: 80px;
}

<div class="shape"></div>

Подходы на основе JavaScript:

Хотя в данном случае это не обязательно, но для полноты картины я также добавляю этот подход. Это также может быть полезно в некоторых случаях:

Холст HTML5:

Мы можем нарисовать эту фигуру на элементе Canvas HTML5, используя функции пути:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 40);
ctx.quadraticCurveTo(311, 80, 622, 40);
ctx.lineTo(622, 0);
ctx.fill();

<canvas id="canvas" width="622" height="80"></canvas>

Ниже приведено краткое описание методов, используемых в приведенном выше коде:

• beginPath() используется для создания нового пути. Как только новый путь создан, будущие команды рисования направляются на этот путь.
• moveTo(x, y) перемещает перо в координаты, указанные x и y.
• lineTo(x, y) рисует прямую линию от текущего положения пера до точки, указанной x и y.
• quadraticCurveTo(cp1x, cp1y, x, y) рисует кривую от текущего положения пера до точки, указанной x и y, используя контрольную точку, указанную cp1x и cp1y.
• fill() заполняет текущий путь, используя ненулевое или четно-нечетное правило намотки.

Полезные ресурсы:

• Радиальный градиент: Спецификации, MDN
• SVG: спецификации, MDN
• HTML5 Canvas: спецификации, MDN

Это то, что вы хотите:

div{
    background-color: black;
    width: 500px;
    height: 300px;
    border-radius: 0 0 50% 50% / 50px;
}

В отличие от принятого ответа, это работает даже при увеличении высоты div.

Демонстрация: jsFiddle

Да, вы можете сделать это в CSS - в основном сделайте свой div шире страницы, чтобы исправить слишком закругленные края, затем расположите его влево, чтобы компенсировать, с радиусом нижней границы, используя значения x и y, и отрицательное нижнее поле для компенсации разрыв:

.round-bottom { 
  border-bottom-left-radius: 50% 200px; // across half & up 200px at left edge
  border-bottom-right-radius: 50% 200px; // across half & up 200px at right edge
  width: 160%; overflow: hidden; // make larger, hide side bits
  margin-bottom: -50px; // apply negative margin to compensate for bottom gap
  position: relative; left:-30%; // re-position whole element so extra is on each side (you may need to add display:block;)
}

.round-bottom { 
  border-bottom-left-radius: 50% 150px !important;
  border-bottom-right-radius: 50% 150px !important;
  position: relative;
  overflow: hidden;
  width: 160%; 
  margin-bottom:-50px;
  left:-30%; 
  background-color:#444;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a2/Tropical_Forest_with_Monkeys_A10893.jpg'); background-position: center center;
  background-size: 42% auto;
  height:150px;
}
.container { width: 100%; height: height:100px; padding-bottom:50px; overflow:hidden;}

<div class="container"><div class="round-bottom"></div></div>

Попробуй это

.navbar{
    border-radius:50% 50% 0 0;
    -webkit-border-radius:50% 50% 0 0;
    background:#000;
    min-height:100px;
}

файл jsFiddle