oli

dabblet.css

/**
 * oli
 */

body { position: relative; margin: 50px; }

div {
	position: absolute;
	top: 0; left: 0;
	border: 40px solid black;
	border-radius: 99px;
}

.o { 
	width: 100px; height: 100px;
	background: white;
	z-index: 1;
}

.li {
	top: 12px;
	width: 50px; height: 320px;
	margin-left: 25px;
}

.li:before, .li:after {
	content: '';
	position: absolute;
	width: 50px;
	right: -40px;

}

.li:before {
	content: ''; display: block;
	height: 90px;
	top: 100px;
	background: white;
}


.li:after {
	background: black;
	height: 50px;
	top: 130px; right: -45px;
	border-radius:40px;
}

dabblet.html

<div class=o></div>
<div class=li></div>

settings.json

{"view":"split-vertical","prefixfree":"","page":"css"}