a close icon

dabblet.css

/*
 * a close icon
 */

a.icon {
	backround-color: white;
	border: 5px solid black;
	border-radius: 50%;
	position: relative;
		
	display: inline-block;
	width: 16px;
	height: 16px;
	
	transform: rotate(-45deg);
	-webkit-transition: -webkit-transform 0.4s ease-out
}
a.icon.expand {
	transform: rotate(0deg);
}
a.icon .spike:before {
	content: "";
	background-color: black;
	width: 6px;
	height: 6px;
	position: absolute;
	top: 0;
	left: 0;
}
a.icon .spike:after {
	content: "";
	background-color: black;
	width: 6px;
	height: 6px;
	position: absolute;
	right: 0;
	bottom: 0;
}
a.icon .spike:nth-child(2):before {
	top: auto;
	bottom: 0;
}
a.icon .spike:nth-child(2):after {
	bottom: auto;
	right: 0;
}

dabblet.html

<div id="box" class="box">
	<a href="#" class="icon">
		<div class="spike"></div>
		<div class="spike"></div>
	</a>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}