Quiero crear un triángulo suave como aquí:

Pero lo que obtengo es:
span { display:inline-block; padding:50px; position:relative; background: linear-gradient(135deg, transparent 15px , #ff4369 20px, #ff4369 50%, white 51%),radial-gradient(circle at 20px 20px, #ff4369 20px, transparent 22px); } span+span {padding:75px;} span:last-of-type {padding:28px;} span:before { display:block; content:'padding'; white-space:nowrap; position:absolute; transform:rotate(-45deg); top:calc(50% - 1.2em); left:0; } span + span:before {content:'instead background-clip';} span:last-of-type:before {content:'56px'} <span></span> <span></span> <span></span>O en: https://codepen.io/gc-nomade/pen/wjgBQL
¿Alguien tiene alguna idea de cómo hacerlo?