<div id="badge">
  <h1><i id="icomoon">&#xe000;</i><span>Zombtastic</span></h1>
</div>
@import url(https://fonts.googleapis.com/css?family=Ultra);

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'icomoon';
	src:url('http://www.nearertonever.com/mecarter/halloween-badge/fonts/icomoon.eot');
	src:url('http://www.nearertonever.com/mecarter/halloween-badge/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('http://www.nearertonever.com/mecarter/halloween-badge/fonts/icomoon.svg#icomoon') format('svg'),
		url('http://www.nearertonever.com/mecarter/halloween-badge/fonts/icomoon.woff') format('woff'),
		url('http://www.nearertonever.com/mecarter/halloween-badge/fonts/icomoon.ttf') format('truetype');
}

html,body {
	background: #800;
	color: #fff;
}
#badge {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
	width: 300px;
	height: 300px;
}

i {
	position: absolute;
	bottom: -62px;
	left: 9px;
	z-index: -1;
	font-size: 380px;
	line-height: 312px;
	width: 100%;
	text-align: center;
	color: #800;
	font-family: 'icomoon';
	width: 300px;
	height: 300px;
	border-radius: 50%;
	box-shadow: 0 0 3px #333;
	background: #f4f4f4;
	transform: skewY(10deg);
}

h1 {
	position: absolute;
	bottom: 62px;
	left: -9px;
	width: 328px;
	transform: skewY(-10deg);
}

h1 span {
	display: block;
	padding: 10px 20px;
	border-radius: 1px;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
	color: #800;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 #999;
	font-size: 36px;
	font-family: 'Ultra';
}

h1:before,
h1:after,
h1 span:before,
h1 span:after {
	position: absolute;
	content: '';
}
	
h1:before,
h1:after {
	top: -13px;
	z-index: -3;
	border-width: 26px;
	border-style: solid;
	border-color: #fff #fff #fff transparent;
}

h1:before {
	left: -32px;
}

h1:after {
	right: -32px;
	border-color: #fff transparent #fff #fff;
}

h1 span:before,
h1 span:after {
	top: -13px;
	z-index: -2;
	border-width: 15px 22px;
	border-style: solid;
	border-color: transparent #ccc transparent transparent;
}

h1 span:before {
	left: -23px;
}

h1 span:after {
	right: -23px;
	border-color: transparent transparent transparent #ccc;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.