TV screen

dabblet.css

/**
 * TV screen
 */


html { background: white; }


.tv {
	position: relative;
	width: 200px;
	height: 150px;
	margin: 20px auto 0;
	background: black;
	border-radius: 50% / 10%;
	
	color: white;
	font:bold 300%/3.2 sans-serif;
	text-align: center;
	text-indent: .1em;
}


.tv:before {
	content: '';
	display: block;
	position: absolute;
	top: 10%;  bottom: 10%; 
	right: -5%; left: -5%;
	z-index: -1;
	background: inherit;
	border-radius: 5% / 50%;
}


.tv2 {
	position: relative;
	width: 220px;
	height: 150px;
	margin: 20px auto 0;
	background-color: transparent;
	background-image: 
		linear-gradient(left top, black, black),
		radial-gradient(ellipse contain, black, black 88%, transparent 89%, transparent),
		radial-gradient(ellipse contain, black, black 88%, transparent 89%, transparent),
		radial-gradient(ellipse contain, black, black 90%, transparent 91%, transparent),
		radial-gradient(ellipse contain, black, black 90%, transparent 91%, transparent);


	background-position: 50%, center top, center bottom, left center, right center;
	background-size: 85%, 100% 20px, 100% 20px, 30px 100%, 30px 100%;
	background-repeat: no-repeat;
	
	color: white;
	font:bold 300%/3.2 sans-serif;
	text-align: center;
	text-indent: .1em;
}

dabblet.html

<div class="tv">13.3"</div>


<div class="tv2">13.3"</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}