body{
      padding: 200px;
      margin: 0
    }
    .box,.box1{
      width: 150px;
      height: 150px;
    }
    .box2{
      position: absolute;
      left: 20px;
      width: 20px;
      top: 65px;
      height: 20px;
      background: -sharp000;
      z-index: 2;
      transform: rotate(-45deg)translateX(32px)rotate(45deg);
    }
    .box1{
      transform: rotate(45deg);
      background: -sharpddd;   
    }
    
  <div class="box">
    <div class="box1">
      <div class="box2"></div>
    </div>
  </div>

do you think you have made yourself clear?

just let the child elements rotate at opposite angles
in your case, you should use the parent to shift the child elements to rotate. This will have the least impact

someone said that one idea is to rotate the child elements at the same angle, and then shift them.

Let me provide another straight man way of thinking.

suppose you rotate n degrees, and if you want to shift x px, to the right, you can write:

transform: translate (x*cos (n) px,-x*sin (n) px)

of course, css is difficult to satisfy you, although you can simulate the effect of sin,cos with sass.

A relatively simple way is to write directly in js.