Отразить и добавить поля к графике SVG

Я хочу создать этот SVG-график, но не могу ни перевернуть его, ни сделать так, чтобы пустое пространство появлялось сверху и снизу. Он просто идеально соответствует разделу выше. Я новичок в svg, так что извиняюсь, если это полный вопрос для новичков.

Как я хочу это

Что у меня есть

Вот мой код:

<div class = "container2">
  <svg viewBox = "0 0 500 500" preserveAspectRatio = "xMinYMin meet">
    <path d = "M0,100 C490,200 350,0 1900,00 L500,00 L0,0 Z" style = "stroke: none; fill:#21252917;"></path>
  </svg>


.container2 {
  display: inline-block;
  position: relative;
  width: 100%;
  vertical-align: middle;
  overflow: hidden;
}

вы также можете рассмотреть решение CSS

— 09.01.2019 13:12

css svg vector-graphics

09.01.2019 13:11

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Вы можете попробовать использовать радиальный градиент, как показано ниже. Он также будет отзывчивым.

.box {
  height:200px;
  padding:20px 0;
  background:
    radial-gradient(200% 200% at 50% 120%,transparent 27.5%,red 28%,red 58%,transparent 58.5%),
    radial-gradient(210% 140% at 50% 120%,transparent 27.5%,red 28%,red 58%,transparent 58.5%);
}


.phone {
  width:150px;
  height:100%;
  border-radius:10px;
  background:grey;
  margin:auto;
}

<div class = "box">
  <div class = "phone"></div>
</div>

Отрегулируйте процентные значения для управления нижней и верхней кривой:

.box {
  --t1:200%;
  --t2:200%;
  --b1:210%;
  --b2:140%;
  height:200px;
  padding:20px 0;
  background:
    radial-gradient(var(--t1) var(--t2) at 50% 120%,transparent 27.5%,red 28%,red 58%,transparent 58.5%),
    radial-gradient(var(--b1) var(--b2) at 50% 120%,transparent 27.5%,red 28%,red 58%,transparent 58.5%);
}


.phone {
  width:150px;
  height:100%;
  border-radius:10px;
  background:grey;
  margin:auto;
}

<div class = "box" style = "--b1:250%;--b2:120%">
  <div class = "phone"></div>
</div>

<div class = "box" style = "--t1:250%;--t2:180%">
  <div class = "phone"></div>
</div>

Это сработало бы отлично, за исключением того, что это не работает в мобильных браузерах и, к сожалению, с safari: / Все еще ищу путь svg. У меня пока есть это, но это только половина того, что я хочу: M-1.97,86 C-1.41,86 250, -17 500,95 L501.97,2000 L-12.69,2000 Z

— 10.01.2019 19:36

09.01.2019 13:22