html - 如何使用线性渐变实现两个选项卡

Question

有两个选项卡，每个选项卡的背景颜色都是线性的，并且它们都有边框半径。它们如下所示：

每个选项卡的背景是

linear-gradient(to right, #FF7243, #FF563E);

代码是这样的：

.tab-container {
  width: 200px;
  display: flex;
  height: 40px;
}

.tab-item {
  flex: 1;
  background: linear-gradient(to right, #FF7243, #FF563E);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px
}

<div class="tab-container">
  <div class="tab-item"></div>
  <div class="tab-item"></div>
</div>

因为border-radius，两个tab之间会有空白，那么如何通过tab切换让空白部分的背景颜色发生变化呢？

Answer 1

使两个选项卡重叠，如下所示。您也可以在不需要时删除半径。

.tab-container {
  width: 200px;
  display: flex;
  height: 40px;
  margin:10px;
}

.tab-item {
  flex: 1;
  background: linear-gradient(to right, #FF7243, #FF563E);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.tab-item:first-child {
  margin-right:-10px;
}

.active {
 z-index:1; /*active always on the top*/
  background: linear-gradient(to right, purple, blue);
}
/*when the first child is not active no need top-right radius*/
:not(.active):first-child {
  border-top-right-radius: 0;
}
/*when the last child is not active no need top-left radius*/
:not(.active):last-child {
  border-top-left-radius: 0;
}

<div class="tab-container">
  <div class="tab-item active"></div>
  <div class="tab-item"></div>
</div>
<div class="tab-container">
  <div class="tab-item"></div>
  <div class="tab-item active"></div>
</div>

Answer 2

.tab-container { width: 200px; display: flex; height: 40px; } .tab-item { flex: 1; background: linear-gradient(to right, #FF7243, #FF563E); border-top-right-radius: 10px; border-top-left-radius: 10px }

<div class="tab-container"> <div class="tab-item"></div> <div class="tab-item"></div>