How to make soft triangle in CSS?

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>