Arched Footer

Create a concave arched (curved) circle at the top of the footer.

by Jon Fuller

HTML

<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<footer><div>footer!</div></footer>

CSS

html,body{
    height:100%;
    margin:0;
    padding:0;
    background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
	overflow: hidden;
}
div {
	padding: 20px;
}
footer {
    background:none;
    position:relative;
	background: red;
}
footer:before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 5020px;
	height: 99999px;
	padding-bottom: 0;
	bottom: 100%;
	background: none;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 13px #deb406, 0 0 13px 6px rgba(0,0,0,0.25), 0 0 0 99999px #084530;
	pointer-events: none;
}

footer > div {
	position: relative;
	z-index: 1;
	color: white;
}