Как создать эту фигуру, используя только CSS? [дубликат] ⇐ CSS

[Anonymous]

Я хочу создать эту фигуру с помощью CSS, но не могу заставить работать верхний правый угол.
введите здесь описание изображения
это весь код, который у меня есть.< /p>
ul.rounded-tabs li {
display: inline-block;
background: #ccc;
margin: 0 40px;
padding: 0.625rem 2rem;
position: relative;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
cursor: pointer;
}

ul.rounded-tabs li:after {
content: '';
height: 20px;
width: 20px;
background: #ccc;
position: absolute;
top: 0;
right: -20px;
z-index: 1;
}

ul.rounded-tabs li span:after {
content: '';
height: 40px;
width: 40px;
background:transparent;
position: absolute;
top: 0;
right: -40px;
z-index: 2;
border-radius: 50%;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... g-only-css