Наклоните один угол и добавьте радиус границы к противоположному углу с помощью градиента ⇐ 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