/**
 * How to make 3-corner-rounded triangle in CSS (SO)
 * http://stackoverflow.com/q/14446677/1397351
 */
.triangle, .triangle:before, .triangle:after {
	width: 20em; height: 20em;
	border-radius: 20%;
}
.triangle {
	overflow: hidden;
	position: relative;
	margin: 7em auto 0;
	transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
	cursor: pointer;
	pointer-events: none;
} 
.triangle:before, .triangle:after {
	position: absolute;
	background: orange;
	pointer-events: auto;
	content: '';
}
.triangle:before {
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%) 
			skewX(30deg) translateY(6.7%) scaleY(.866) translateX(-25%);
}
.triangle:after {
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%) 
			skewX(-30deg) translateY(6.7%) scaleY(.866) translateX(25%);
}

.triangle:hover { overflow: visible; }
.triangle:hover:before, .triangle:hover:after { background: none; }
.triangle:hover, .triangle:hover:before, .triangle:hover:after {
	border: dashed 1px;
}