CSS反转背景颜色

Question

此刻我的CSS看起来像这样：

但是我想要绿色的border-radius块的倒数，我想要这个：

有什么想法如何用最少的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

一个可能的解决方案是对box-shadow和before使用after。 另外，您也可以考虑将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>

Answer 2

我认为您应该添加一个包含内容文本的dic，如下所示：

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

.content {
  color: white;
  border: none;
  background-color: blue;
  height: 100%;
  padding: 10px 10px;
  cursor: pointer;
}
button{
  background-color: white;
  padding: 0px;
  border: 0px;
  margin-left: -4px;
}
button.selected{
  background-color: blue;
}
button.selected .content{
  background-color: white;
  color: black;
  cursor: default;
  border-radius: 15px 15px 0px 0px;
  position: relative;
  vertical-align: bottom;
}

button.before-selected .content{
  border-bottom-right-radius: 10px;
}
button.after-selected .content{
  border-bottom-left-radius: 10px;
}

<div class="navbar">
  <button><div class="content">tab1</div></button>
  <button class="before-selected"><div class="content">tab2</div></button>
  <button class="selected"><div class="content">tab3</div></button>
  <button class="after-selected"><div class="content">tab4</div></button>
</div>

Answer 3

我建议在background-image和clip-path上使用svg或在::before和::after上使用X=dataset.iloc[:, 0].values y=dataset.iloc[:, 1].values regressor=LinearRegression() X=X.reshape(-1,1) regressor.fit(X,y) 属性。

Answer 4

您可以使用以下属性获取绿色边框半径块的反转图像：

transform: rotate(180deg);

所以您的CSS会像这样：

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

或者您可以使用以下内容并对其进行更好的样式设置：

.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: transparent;
  height: 20px;
  width: 20px;position: absolute;
  content: '';
  bottom: 0px;
  transform: rotate(180deg);
}

button:after {
  right: -20px;
  border-bottom-left-radius: 15px;
  -webkit-box-shadow: inset 0px 6px 5px 0px #000000;
  box-shadow: inset 0px 6px 5px 0px #000000;
}

button:before {
  left: -20px;
  border-bottom-right-radius: 15px;
  -webkit-box-shadow: inset 4px 8px 5px -3px #000000;
  box-shadow: inset 4px 8px 5px -3px #000000;
}

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

Answer 5

您必须在tab元素的$entertainer和@foreach($entertainer as $e) {{$e}} @endforeach 上使用SVG。这是一个示例：

::before

::after

Codepen link。