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

我设置了圆形的面包屑进行导航。我如何删除左右背景，如下图所示。

.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>

最佳答案

检查此fiddle

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

关于css - 删除圆形面包屑的左右背景色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40459062/