Сигмовидная кривая с CSS

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

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

JSFiddle: Неоконченная кривая сигмоида

#container {
  padding-top: 10%;
  padding-bottom: 10%;
  background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#parallelogram {
  margin-left: 35%;
  width: 100%;
  height: 900px;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);
  background: white;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}
<div id="container">
  <div id="parallelogram">
  </div>
</div>

Ответы

Ответ 1

Использовать SVG для сложных фигур, а не CSS:

Как я уже упоминал в своих комментариях, не используйте CSS для создания таких сложных фигур. SVG - рекомендуемый инструмент для такого сложного материала. SVG легко создавать, поддерживать, и они также реагируют (масштабируемы) по умолчанию и поэтому имеют много преимуществ.

Создание сигмовидной формы:

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

  • M0,750 перемещает воображаемое перо близко к нижнему левому краю элемента SVG (координаты устанавливаются немного ниже высоты SVG, так что в нижней части есть зазор, где будет видна тень).
  • L250,750 создает горизонтальную L из точки (0,768) - (250,768)
  • C650,730 500,154 1024,154 создает фактическую кривую. Здесь первые две координаты - контрольные точки кривой ((650,730), (500,154)), а третья - конечная точка (1024,154). Кривизна кривой может быть отрегулирована путем изменения контрольных точек.
  • L1024,0 0,0 0,750 - для завершения формы. Форма должна быть заполнена для заполнения.

body {
  margin: 0;
}
svg {
  width: 100%;
  height: 100vh;
}
<svg viewBox='0 0 1024 768' preserveAspectRatio='none'>

  <!-- For the shadow -->
  <defs>
    <filter id="dropShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
      <feOffset dx="3" dy="3" result="offsetBlur" />
      <feFlood flood-color="#AAA" flood-opacity="1" result="offsetColor" />
      <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <!-- End of shadow -->

  <!-- For filling the top-left with pattern -->
  <pattern id='dots' patternUnits='userSpaceOnUse' width='25' height='25'>
    <polygon points='0,0 0,25 25,25 25,0' fill='yellowgreen' />
    <circle cx='12.5' cy='12.5' r='4' fill='rebeccapurple' />
  </pattern>
  <!-- End of pattern -->

  <!-- Actual sigmoid curve -->
  <path d='M0,750 L250,750 C650,730 500,154 1024,154 L1024,0 0,0 0,750' fill='url(#dots)' filter='url(#dropShadow)' />

</svg>