JavaScript 없이 CSS에서 세 모서리가 둥근 삼각형을 어떻게 만들 수 있습니까?

.triangle {
  position: relative;
  background-color: orange;
  text-align: left;
}
.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
  width: 10em;
  height: 10em;
  border-top-right-radius: 30%;
}
.triangle {
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
}
.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}
.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}