I saw there was someone asking for an isosceles triangle and through some tampering with the accepted answer above I found how to manipulate it to get what I wanted considering I needed the same. This should help anyone looking for a slight change in the rounded corner triangle.

You'll notice that I separated out the width, height, and border-top-right-radius then proceeded to change the border-top-right-radius to shape the corners. The only other thing I changed was the transform property on the element directly. You can shape it how you see fit, but those seem to be the only necessary changes.

.diff-arrow{
    position: relative;
    background-color:#20C0F1;
    text-align: left;
    width:  10em;
    height: 10em;
    border-top-right-radius: 20%;
}
.diff-arrow:before,.diff-arrow:after {
    content: '';
    position: absolute;
    background-color: inherit;
    width:  10em;
    height: 10em;
    border-top-right-radius:15%;
}
.diff-arrow { transform: rotate(-45deg) skewX(0deg) scale(0.5); }
.diff-arrow:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); }
.diff-arrow:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); }

<div class="diff-arrow"></div>

I saw there was someone asking for an isosceles triangle and through some tampering with the accepted answer above I found how to manipulate it to get what I wanted considering I needed the same. This should help anyone looking for a slight change in the rounded corner triangle.

You'll notice that I separated out the width, height, and border-top-right-radius then proceeded to change the border-top-right-radius to shape the corners. The only other thing I changed was the transform property on the element directly. You can shape it how you see fit, but those seem to be the only necessary changes.

.diff-arrow {
  margin-left:30px;
  position: relative;
  background-color: #20C0F1;
  text-align: left;
  width: 10em;
  height: 10em;
  border-top-right-radius: 20%;
}

.diff-arrow:before,
.diff-arrow:after {
  content: '';
  position: absolute;
  background-color: inherit;
  width: 10em;
  height: 10em;
  border-top-right-radius: 15%;
}

.diff-arrow {
  transform: rotate(-45deg) skewX(0deg) scale(0.5);
}

.diff-arrow:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.diff-arrow:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

<div class="diff-arrow"></div>