[Помощ] CSS и създаване на полукръг

[Dimbadboy]

Здравейте искам да направя footer-a на сайта по следния начин - Линк към снимката

Пробвах сам със следния код:

.footer {
    padding-top: 20px;
    height: 300px;
    background-image: radial-gradient(circle 50px at 50% 0, transparent 50px, #0d4263 50px);
    background-image: -webkit-radial-gradient(50% 0, circle, transparent 50px, #0d4263 50px);
}

Но си личат пикселите около фигурата. На снимката, която съм дал е изрязано доста елегантно и висококачествено. Ако може някой да удари едно рамо, ще съм му изключително благодарен. Благодаря предварително.

 

[joTunkiq]

Аз съм от старата школа и го правих по следния начин. Правя на PS едно кръгче, примерно СИВО(такъв ти е горния цвят) и с позиция абсолютна или флоутнато си го местя където искам, така не става ли ? :idea:

 

[Dimbadboy]

Този начин ми хрумна първо, но ми се иска цялото да е написано на CSS. Все пак благодаря за предложението. :?:

 

[joTunkiq]

Добре направи едно квадратче с див и му задай бордер радиус 50% и така ще стане перфектен кръг. И пак си го намести, така пробва ли ? http://jsfiddle.net/ou3htnLL/ :idea: :?:

 

[Dimbadboy]

Ето го и финалния резултат, които сътворих. Благодаря ти, joTunkiq!

.footer{
    width:100%;
    height:400px;
	margin-top:40px;
    background:#0d4263;
    display:block;
    position:relative;
    overflow:hidden;
}

.footer:after{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#ececec;
    display:block;
    position:absolute;
    content:'';
    top:-50px;
    left:40%;
    right:40%;
    
}