it-swarm.com.ru

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

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

 enter image description here

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

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

CSS:

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

видите, это нормально для вас: ДЕМО

21
Aravind30790

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

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

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

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

Мы можем использовать элемент SVG's 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 используется для закрытия текущего пути.

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

 Div element with curved bottom

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

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 OR ::after, ширина и высота которого больше, чем у его родителя.
  • Добавьте border-radius, чтобы создать округлую форму.
  • Добавьте overflow: hidden на parent, чтобы скрыть ненужную часть.

Обязательный 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- Радиальный градиент:

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

Обязательный 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 Canvas, используя функции пути:

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() заполняет текущий путь, используя ненулевое или четно-нечетное правило намотки.

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

18
Mohammad Usman

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

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

jsFiddle demo

5
manish_s

Да, вы можете сделать это в 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;)
1
Vision Hive

Попробуй это

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

Файл jsFiddle

0
Roy Sonasish