body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #eceffc;
}

.bookmark {
  --width: 40px;
  --height: calc(var(--width) * 1.5);
  --border-color: black;
  --fill-color: #ff4141;
  position: relative;
  width: var(--width);
  height: var(--height);
  transform-style: preserve-3d;
  cursor: pointer;

  &__toogle {
    position: absolute;
    opacity: 0;

    &:checked ~ .bookmark__fill {
      transform: translateX(0);
    }
  }

  &__stroke {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 4px solid var(--border-color);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 73%, 0 100%);

    &::before {
      position: absolute;
      content: "";
      left: 50%;
      bottom: -37%;
      box-sizing: border-box;
      width: calc(var(--width) / 1.5);
      height: calc(var(--width) / 1.5);
      border: 4px solid var(--border-color);
      border-bottom: 0;
      border-right: 0;
      transform: translate(-50%, -50%) rotate(45deg);
    }
  }

  &__fill {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--fill-color);
    border-radius: 10px 10px 0 0;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 73%, 0 100%);
    transform: perspective(150px) rotateX(90deg);
    transform-origin: center top;
    transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  }
}
