CSS3: triángulo con bordes redondeados

Todo un clásico de css. Quien no ha maquetado algún triángulo y ha querido aplicarle el efecto «redondeado» a los bordes. A continuación una forma de hacerlo jugando con rotate, skewX, scale y translate:

.triangulo-redondeado,
.triangulo-redondeado:before,
.triangulo-redondeado:after {
  position: relative;
  display:block;
	width:  100px;
	height: 100px;
	background: #000;
	border-top-right-radius: 20px;
}
.triangulo-redondeado {
  margin: 60px auto 0 auto;
  transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.triangulo-redondeado:before,
.triangulo-redondeado:after {
	content: '';
	position: absolute;
}
.triangulo-redondeado:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangulo-redondeado:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

Ejemplo:

See the Pen Triángulo con bordes redondeados by Jorge Maiden (@jorgemaiden) on CodePen.