3-corner-'rounded' triangle

dabblet.css

/* 3-corner-'rounded' triangle */
.triangle {
	font-size: 10px;
	
	position: relative;
	width: 6em;
	height: 6em;
	text-align: center;
	overflow: hidden;
	border-radius: 100%;

	margin: 10% auto 0;
} 
.triangle:before {
	content: '';
	position: absolute;
	border: solid 3em transparent;
	border-bottom-color: orange;
	border-bottom-width: 5em;
	border-top-width: 0;
	margin: -.414em -50%;
}

.triangle:hover { overflow: visible; }
.triangle.large {
	font-size: 4em;
	margin-top: 1em;
}

dabblet.html

<div class="triangle"></div>
<!-- or -->
<div class="triangle large"></div>

dabblet.js

// alert('Hello world!');

settings.json

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