SOURCE

<div class="wrap">
    <div class="tab active">
        <div class="fix-before"></div>
        aaa
        <div class="fix-after"></div>
    </div><div class="tab">
        <div class="fix-before"></div>
        bbb
         <div class="fix-after"></div>
    </div>
</div>

.wrap {
    background:red;
    overflow: hidden
}

.tab {
    display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: green;
    border-top-left-radius:20px 40px;
    border-top-right-radius:20px 40px;
    position: relative;
    z-index: 0;
    text-align: center;
    margin-left: -40px
       
}
.fix-before {
    background: green;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -18px;
    bottom: 0;
    overflow: hidden
}
.fix-before::after {
    content: '';
    display: block;
    background: green;
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 20px;
    top: -20px;
    left: -20px;
}
.fix-after {
        background: green;
        width: 20px;
        height: 20px;
        position: absolute;
        right: -18px;
        bottom: 0;
        overflow: hidden;
    
}
.fix-after::after {
    content: '';
    display: block;
    background: green;
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 20px;
    top: -20px;
    left: -5pxpx;
}
.active {
    background: yellow;
    z-index: 10;

   
}
.active .fix-before {
    background: yellow;
}
.active .fix-after {
        background: yellow;  
}



.tab:last-child .fix-after::after {
    content: '';
    display: block;
    background: red;
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 20px;
    top: -20px;
    left: 0px;
}