Как реализовать две вкладки с использованием линейного градиента

Question

Есть две вкладки, и цвет фона каждой вкладки является линейным, и обе они имеют border-radius.Они выглядят так:

фон каждой вкладки

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>

Из-за радиуса границы между двумя вкладками будет пробел, так как изменить цвет фона пустой части с помощью переключателя вкладок?

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>