Доброе время суток.
Подскажите как вы верстаете блоки нестандартной формы (см. скриншот).
У тебя вверху блок с контентом абсолютно стандартный. Синий блок просто декоративный и его, в зависимости от остального наполнения на странице (щас там пусто), можно делать либо обычным бекграундом, либо псеведо-элементом с трансформацией (смотря какие будут ограничения). Скорее все-таки последнее. Небольшой пример.
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: так нагляднее
Слева внизу тень растянута вниз.