如何创建外侧为圆边、内侧为斜边的切换按钮？

<div class="toggle-button"></div>

.toggle-button {
  width: 100px; /* 按钮宽度 */
  height: 40px; /* 按钮高度 */
  background-color: #007bff; /* 按钮背景颜色 */
  border-radius: 20px; /* 外侧圆边的半径 */
  position: relative;
  overflow: hidden;
}

.toggle-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%; /* 内侧斜边的宽度 */
  width: 200%; /* 内侧斜边的宽度 */
  height: 100%;
  background-color: #fff; /* 内侧斜边的颜色 */
  transform: skewX(-30deg); /* 内侧斜边的角度 */
  transform-origin: top left;
}

.toggle-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; /* 切换按钮的宽度 */
  height: 20px; /* 切换按钮的高度 */
  background-color: #fff; /* 切换按钮的颜色 */
  border-radius: 50%; /* 切换按钮为圆形 */
}