Pure CSS Marker Pin

HTML

<div class="pin"></div>

CSS

/* PIN */
.pin {
	background-color: #999;
	background-image: linear-gradient(left, hsla(0,0%,100%,.2), hsla(0,0%,0%,.2));
	display: block;
	height: 1.7em;
	


	width: .1em;
	-webkit-transform: rotate(7deg);
	-moz-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	transform: rotate(7deg);
}
.pin:after {
	background-color: #E74C3C;
	background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.8), hsla(0,0%,0%,.8));
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
	    inset .2em .2em .2em hsla(0,0%,100%,.3),
	    inset -.2em -.2em .2em hsla(0,0%,0%,.3);
	content: '';
	height: 1em;
	left: -.47em;
	position: absolute;
	top: -.57em;
	width: 1em;
}