Наклоните один угол и добавьте радиус границы к противоположному углу с помощью градиента ⇐ CSS

[Anonymous]

Как мне сделать этот дизайн с помощью CSS?
введите сюда описание изображения
Я пробовал все, но градиент псевдо элемент перекрывает основной текст.
span {
border: 2px solid #FFC402;
border-radius: 15px 0px 0px 15px;
padding: 6px;
font-size: 18px;
display: inline-block;
background: linear-gradient(90deg, #7a6bac 20%, #e83680 100%);
position:relative;
box-sizing: border-box;
}

span:after{
content:"";
width: 15px;
height:90%;
position:absolute;
right:-8px;
top:-2px;
background: linear-gradient(90deg, #7a6bac 20%, #e83680 100%);
transform: skew(-20deg);
border-top: 2px solid #FFC402;
border-right: 2px solid #FFC402;
box-sizing: border-box
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... h-gradient