дважды щелкните и выберите путь (включая «/») в Terminal.app

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

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

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

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

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

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

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

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

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

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

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

svg {
  width: 100%;
}

2. Clipping:

Clipping означает удаление или скрытие некоторых элементов элемента.

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

Ниже приведен код:

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

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

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

svg {
  width: 100%;
}

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

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

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

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

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

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

Рабочий демонстрационный файл:

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

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

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

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

Только один элемент 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;
}

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

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

HTML5 Canvas:

Мы можем нарисовать эту фигуру на элементе 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();

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

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

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

• Радиальный градиент: Особенности , MDN
• SVG: , MDN