Вёрстка блоков нестандартных форм

Доброе время суток.

Подскажите как вы верстаете блоки нестандартной формы (см. скриншот).

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

1 Симпатия

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

Вполне нормально отрисовывается тень.
В примере выше, замени css-правила.

header:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1200px;
  background-color: lightBlue;
  border-radius: 40px;
  transform-origin: left top;
  transform: rotateY(30deg) rotateX(-40deg) translateY(-5%);
background-image: linear-gradient(135deg, #5AC7F8 0%, #2D68FB 100%);
box-shadow: 0 0 170px 10px rgba(0,0,0,0.4);
}

UPD: так нагляднее

Слева внизу тень растянута вниз.