Is it possible to make a rounded triangle with just CSS?

Question

I'm trying to make the following shape with just CSS:

Here is what I currently have:

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 56px 56px 0 0;
  border-color: #ff4369 transparent transparent transparent;
}

<div class="triangle">
</div>

I'm unable to use border radius to make the top-left corner rounded... Is there another way to do this or do I need to use an SVG?

Answer 1

Yes it's possible using border-radius:

.triangle {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border-top: solid 30px rgb(200,30,50);
  border-left: solid 30px rgb(200,30,50);
  border-top-left-radius: 12px;
  border-right: solid 30px transparent;
  border-bottom: solid 30px transparent;
}

<div class="triangle triangle-0"></div>