カプセルみたいなやつ
code:html
<div class="switch is-left">
<div class="left">左</div>
<div class="right">右</div>
</div>
code:scss
.switch {
display: flex;
margin-right: auto;
width: 100px;
border: 2px solid $main-color;
border-radius: 50rem;
div {
text-align: center;
font-weight: bold;
width: 50%;
padding: 0.5rem;
cursor: pointer;
}
}
.is-right {
background: linear-gradient(
to left,
$main-color 0%,
$main-color 50%,
white 50%,
white 100%
);
.left {
color: $main-color;
}
.right {
color: white;
}
}
.is-left {
background: linear-gradient(
to right,
$main-color 0%,
$main-color 50%,
white 50%,
white 100%
);
.left {
color: white;
}
.right {
color: $main-color;
}
}
外側のdiv.switchでカプセルを作って内側のdiv.left, div.rightで背景色を操作すると上手く背景色が染まらないので、div.switchの背景色を2分割して染める
background: linear-gradient()の分割数を増やすと、選択肢2個以上のスイッチにもできる
code:html
<div class="switch select1">
<div class="s1">1</div>
<div class="s2">2</div>
<div class="s3">3</div>
</div>
code:scss
.switch {
display: flex;
width: 175px;
border: 2px solid $main-color;
border-radius: 50rem;
margin: 0 auto;
div {
text-align: center;
font-weight: bold;
width: calc(100% / 3);
padding: 0.5rem;
cursor: pointer;
color: $main-color;
}
/* 選択肢増やす時は丁度良くボーダー引いてあげる */
.s2 {
border-left: 2px solid $main-color;
border-right: 2px solid $main-color;
}
}
.select1 {
background: linear-gradient(
to right,
/* 1番目 */
$main-color 0%,
$main-color calc(100% / 3),
/* 2番目 */
white calc(100% / 3),
white calc(100% / 3 * 2),
/* 3番目 */
white calc(100% / 3 * 2),
white 100%
);
.s1 {
color: white;
}
}
.select2 {
background: linear-gradient(
to right,
/* 1番目 */
white 0%,
white calc(100% / 3),
/* 2番目 */
$main-color calc(100% / 3),
$main-color calc(100% / 3 * 2),
/* 3番目 */
white calc(100% / 3 * 2),
white 100%
);
.s2 {
color: white;
}
}
.select3 {
background: linear-gradient(
to right,
/* 1番目 */
white 0%,
white calc(100% / 3),
/* 2番目 */
white calc(100% / 3),
white calc(100% / 3 * 2),
/* 3番目 */
$main-color calc(100% / 3 * 2),
$main-color 100%
);
.s3 {
color: white;
}
}
calc(100% / n)のnをスイッチの数に応じて変えてやる