如何添加在边界过渡上移动的方块

Question

https://ibb.co/jWTW6T。 ＆lt; ---我想要实现的形象

＆＃13;

＆＃13;

executeFunction(event) {
  var innerFunction = (args) => {

      // the lambda allows you to keep the original scope, so you can still use `this`
      this.doSomething('somevariable', () =>  {
        if(/* expression */) {

           // innerFunction isn't defined globally but scope is maintained so you can call it like so
          innerFunction(args);
         };
      });

      this.doAnotherFunction();
    }
}

＆＃13;

.image-client {
    width: 100%;
    margin: 50px auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.image-client-diamond {
    width: 50%;
    padding: 10px;
    margin-bottom: 30%;
    position: relative;				
}

.image-client-diamond-inner {
    width: 69.5%;
    height: 0;
    border-radius: 12px;
    border: 2px solid orange;
    padding-bottom: 69.5%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);

}
img {
    width: 100%;
    transform: rotate(-45deg);
}

＆＃13;

＆＃13;

＆＃13;

] 1

如何使用迷你方块获取边框过渡动画，当您将鼠标悬停在此元素上时会生成动画。只有封闭图像上显示的橙色块应该移动而不是线本身。