Помощ за създаване на HTML страница с извита заглавна секция

Можете да използвате border-radius.

Вижте моя пример за jsFiddle.

Моята е по-чиста версия на тази на @Alex:

Демо на живо

.head {
    -webkit-border-top-left-radius: 40% 80px;
    -webkit-border-top-right-radius: 40% 80px;
    -moz-border-radius-topleft: 40% 80px;
    -moz-border-radius-topright: 40% 80px;
    border-top-left-radius: 40% 80px;
    border-top-right-radius: 40% 80px;

    background: blue;
    height: 280px
}

<div class="head"></div>

Очевидно няма да работи в IE.

Можете да използвате CSS3 или специфични за webkit свойства, но това не се поддържа добре, що се отнася до съвместимостта между различни браузъри. Ако искате да поддържате възможно най-много браузъри, най-добре е да използвате фоново изображение, за да постигнете този ефект.

Ето версия за различни браузъри, която направих с помощта на jquery. По принцип скриптът създава много участъци с бял фон и намаляваща ширина.

Можете да си поиграете с променливите STEPS и FACTOR, които ще променят резултата. Стъпковата функция задава облекчаването на кривата. Може да го замените по-късно с по-добри функции от моите, това е само пример.

var STEPS = 53;
var FACTOR = 5;

var $el = $('div.header');
var width = $el.outerWidth();
var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
    tmpWidth = stepWidth(i, width);
    $span.clone().css({
        'bottom': i + 'px',
        'width': tmpWidth,
        'left': (width - tmpWidth)/2
    }).appendTo($el);

}
function stepWidth(i, width){
    return -(1 / FACTOR * Math.pow(i, 2)) + width;
}

Можете да намерите целия код (html + css на Fiddle)

Ето още един начин за постигане на това.

1. Начертайте наслагване с псевдо елемент с width и height по-големи от самия елемент.
2. Приложете border-radius, за да създадете кръгъл ефект и background-color.
3. Добавете overflow: hidden към родител, за да скриете излишната част.

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

body {
  background: linear-gradient(lightblue, blue);
  min-height: 100vh;
  margin: 0;
}

.box {
  position: relative;
  margin: 5vh auto;
  overflow: hidden;
  height: 90vh;
  width: 500px;
}

.box:before {
  border-radius: 100% 100% 0 0;
  position: absolute;
  background: white;
  bottom: -200px;
  right: -200px;
  left: -200px;
  content: '';
  top: 0;
}

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