html - Css 反转背景颜色

Question

目前我的 CSS 看起来像这样:

但我想要绿色 border-radius block 的倒数，我想要这个:

知道如何用最少的额外 div 和其他东西实现这一点吗？到目前为止，这是我的代码:

.navbar {
  background-color: blue;
  height: 35px;
}

button {
  color: white;
  border: none;
  // background-color: green;
  background-color: transparent;
  height: 100%;
  padding: 0px 10px;
  cursor: pointer;
}

button.selected {
  background-color: white;
  color: black;
  cursor: default;
  border-radius: 15px 15px 0px 0px;
  position: relative;
  height: 30px;
  vertical-align: bottom;
}

button:after,
button:before {
  background-color: rgb(188, 218, 188);
  height: 20px;
  width: 20px;
  position: absolute;
  content: '';
  bottom: 0px;
}

button:after {
  right: -20px;
  border-bottom-left-radius: 15px;
}

button:before {
  left: -20px;
  border-bottom-right-radius: 15px;
}

<div class="navbar">
  <button>tab1</button>
  <button>tab2</button>
  <button class="selected">tab3</button>
  <button>tab4</button>
</div>

Answer 1

一种可能的解决方案是对before 和after 使用box-shadow。您也可以考虑对伪元素使用 pointer-events:none，因为您不想阻挡导航中的其他元素。

另一种解决方案是为您的按钮使用 svg。

.navbar {
  background-color: blue;
  height: 35px;
  overflow:hidden;
}

button {
  color: white;
  border: none;
  background-color: transparent;
  height: 100%;
  padding: 0px 10px;
  cursor: pointer;
}

button.selected {
  background-color: white;
  color: black;
  cursor: default;
  border-radius: 15px 15px 0px 0px;
  position: relative;
  height: 30px;
  vertical-align: bottom;
}

button:after,
button:before {
  background-color: transparent;
  height: 20px;
  width: 20px;
  position: absolute;
  content: '';
  bottom: 0px;
  box-shadow: 2px 10px 1px white;
  pointer-events:none;
}

button:after{box-shadow: -2px 10px 1px white;}

button:after {
  right: -20px;
  border-bottom-left-radius: 15px;
}

button:before {
  left: -20px;
  border-bottom-right-radius: 15px;
}

<div class="navbar">
  <button>tab1</button>
  <button>tab2</button>
  <button class="selected">tab3</button>
  <button>tab4</button>
</div>