丸いブレッドクラムの左右の背景色を削除するには

Question

ナビゲーション用の丸いブレッドクラムを設定します。次の画像のように、左と右の背景を削除するにはどうすればいいですか？

.tabs { 
 
    overflow: hidden; 
 
    background: #eee; 
 
} 
 
.tabs a { 
 
    color: #363c46; 
 
    float: left; 
 
    width: 135px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    text-decoration: none; 
 
} 
 
.tabs a.active { 
 
    background: #fefb09; 
 
    border-radius: 30px; 
 
} 
 
.tabs a:first-child { 
 
    border-top-left-radius: 30px; 
 
    border-bottom-left-radius: 30px; 
 
} 
 
.tabs a:last-child { 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
    background: #d1d1d1; 
 
    /* to render the right end look */ 
 
}

<div class="tabs"> 
 
    <a class="active">Item 1</a> 
 
    <a>Item 2</a> 
 
    <a>Item 3</a> 
 
    <a>Item 4</a> 
 
    <a>Item 5 </a> 
 
</div>

Answer 1

チェックこのfiddle

.tabs { 
overflow: hidden; 
background: #eee; 
display: inline-block; 
border-radius: 30px; 
} 

Answer 2

タブにボーダー半径を追加します。

.tabs { 
 
    background: #eee; 
 
    border-radius: 30px; 
 
    overflow: hidden; 
 
}

Answer 3

あなたは親要素に希望border-radiusを設定し、子要素から削除することができます。

.activeクラスでは、border-radiusの値をinheritに変更すると、その親要素で宣言されているプロパティと同じ値になります。親のborder-radiusを変更すると、.activeクラスで変更する必要がなくなります。

.tabs { 
 
    overflow: hidden; 
 
    background: #eee; 
 
    border-radius: 30px; 
 
    display: inline-block; /* Needed to display inline but retaining its block characteristics */ 
 
} 
 
.tabs a { 
 
    color: #363c46; 
 
    float: left; 
 
    width: 100px; /* Changed for illustration purposes */ 
 
    text-align: center; 
 
    line-height: 50px; 
 
    text-decoration: none; 
 
} 
 
.tabs a.active { 
 
    background: #fefb09; 
 
    border-radius: inherit; 
 
} 
 
.tabs a:last-child { 
 
    background: #d1d1d1; 
 
    /* to render the right end look */ 
 
}

<div class="tabs"> 
 
    <a class="active">Item 1</a> 
 
    <a>Item 2</a> 
 
    <a>Item 3</a> 
 
    <a>Item 4</a> 
 
    <a>Item 5 </a> 
 
</div>