Roundal with inset shadow

dabblet.css

/* Roundal with inset shadow */

body {
	background: #28effc;
}

.roundal {
	/* change these three to adjust size */
	font-size: 		16px;
	width: 			170px;
	height: 		170px;
	
	/* leave these alone */
	display: 		block;
	border-radius: 	50%;
	box-shadow: 	inset 0 .3em .3em #222;
	position: 		relative;
	
	/* for the demo only - can be deleted */
	margin: 30px auto;
}

.roundal:after {
	content: "";
	display: block;
	width: inherit;
	height: inherit;
	border-radius: inherit;
	box-shadow: inset 0 -.2em .2em white;
}

.roundal-arrow--left:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-32%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3em 0 3em 5em;
	border-color: transparent transparent transparent black;
}

.roundal-arrow--right:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-62%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3em 5em 3em 0;
	border-color: transparent black transparent transparent;
}

dabblet.html

<div class="roundal"></div>

dabblet.js

// alert('Hello world!');

settings.json

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