css - 删除圆形面包屑的左右背景颜色

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;
}