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

Итак, я работаю над сайтом, и мне было интересно, возможно ли это, используя HTML5, CSS3 (и JavaScript при необходимости), сделать div с изогнутым дном, поэтому он будет выглядеть примерно так:

Или это можно сделать только с использованием фонового изображения?

<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#">Home</a></li>
        </ul>
        </div>
    </div>
</body>

Ответы

Ответ 1

CSS

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

см. это нормально для вас: DEMO

Ответ 2

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

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

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

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

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

Только один атрибут 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>

Ответ 3

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

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

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

Демо: jsFiddle

Ответ 4

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

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

Ответ 5

Попробуйте это

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

jsFiddle File