Css 如何剪切一个正方形以便我可以绘制追逐边框

在我的React.js应用程序中，我有一个正方形形状，我想在其中绘制两个在边界周围相互追逐的边界.追逐边界总是对立的，永远追不上对方.通过这种方式，我想创建一个效果，看起来像在下面的图像与霓虹灯黄色.我一直在努力做到这一点，现在我已经相当接近了，但我未能正确地完成追逐边界.它们似乎在绕着广场移动时破裂了，最后我实现了类似下面另一张图像的东西.

Here is the that I have tried so far to solve my problem: const chasingBorders1 = keyframes`
  0% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
  25% {
    clip-path: polygon(100% 60%, 100% 100%, 60% 60%, 100% 40%);
  }
  50% {
    clip-path: polygon(0% 100%, 40% 100%, 0% 60%, 40% 60%);
  }
  75% {
    clip-path: polygon(0% 0%, 0% 40%, 40% 0%, 40% 40%);
  }
  100% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
`;

const chasingBorders2 = keyframes`
  0% {
    clip-path: polygon(0% 100%, 0% 60%, 40% 100%, 0% 100%);
  }
  25% {
    clip-path: polygon(0% 0%, 0% 40%, 40% 0%, 40% 40%);
  }
  50% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
  75% {
    clip-path: polygon(100% 60%, 100% 100%, 60% 60%, 100% 40%);
  }
  100% {
    clip-path: polygon(0% 100%, 0% 60%, 40% 100%, 0% 100%);
  }
`;

const ModeBox = styled(motion.div)`
  position: absolute;
  top: 45px;
  left: 33.5%;
  background: #020202;
  border: solid 5px white;
  border-radius: 30px;
  width: 580px;
  height: 100px;
  z-index: 95;

  &::before, &::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: solid 8px orange;
    border-radius: inherit;
    z-index: -1;
    box-shadow: 0 0 10px #6F5824, 0 0 15px #6F5824, 0 0 20px #6F5824;
  }

  &::before {
    animation: ${chasingBorders1} 4s infinite;
  }

  &::after {
    animation: ${chasingBorders2} 4s infinite;
  }
`;