css - Facing problem while making a toggle with Clip Path - Stack Overflow

admin管理员组

文章数量:1400080

I am making a toggle button that is a ClipPath hexagon. I wanna make it so in its Checked state it puts in another Clip Path Hexagon in the middle. With this behavior it simply replaces the background color.

.inp_toggle {
    height: 2em;
    width: 2.25em;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #3c3c3c;
    margin-bottom: 1em;
}
.inp_toggle.checked {
    background: #a92800;
}

I am making a toggle button that is a ClipPath hexagon. I wanna make it so in its Checked state it puts in another Clip Path Hexagon in the middle. With this behavior it simply replaces the background color.

.inp_toggle {
    height: 2em;
    width: 2.25em;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #3c3c3c;
    margin-bottom: 1em;
}
.inp_toggle.checked {
    background: #a92800;
}

• css

Share Improve this question Follow asked Mar 25 at 8:13 user30021668user30021668 1

• Please provide a proper minimal reproducible example when asking this kind of question, not just snippets that lack context. – C3roe Commented Mar 25 at 8:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Use a pseudo elemet (:before) to place a smaller hexagon in the middle.

Click the hexagon to see the example:

.inp_toggle, .inp_toggle::before {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.inp_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  width: 2.25em;
  background: #3c3c3c;
  margin-bottom: 1em;
}

.inp_toggle:has(input:checked)::before {
  width: 50%;
  height: 50%;
  background: #a92800;
  content: '';
}

<label class="inp_toggle">
  <input type="checkbox" hidden>
</label>

本文标签： cssFacing problem while making a toggle with Clip PathStack Overflow