如何利用div完成菱形，并让内部的文字不发生旋转！

如何利用div完成菱形盒子并使其再内的文字不发生旋转

// A code block
  <div class="gd">
        <div class="ft">
            <div class="son">
                <div class="son1">
                    <div class="son2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. samus fug tur minus
                        dolorem minima.</div>
                </div>
                <div class="son1">
                    <div class="son2">Lorem ipsum dolor sit, amet consectetur adipisicing e i s magni repudiandae
                        a tenetur minus dolorem minima.</div>
                </div>
                <div class="son1">
                    <div class="son2">Lorem ipsum dolor sit, amet consectetur adipisicing accusaf p iandae a
                        tenetur minus dolorem minima.</div>
                </div>
                <div class="son1">
                    <div class="son2"> ciatis harum obcaecati quo omnis ex voluptatibus it i repudiandae a
                        tenetur minus dolorem minima.</div>
                </div>
            </div>
        </div>
    </div>

css代码段

// A code block
 .gd {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .ft {
        width: 750px;
        height: 800px;
        display: flex;
        justify-content: center;
        border: 1px solid red;
        position: relative;
    }

    .son {
        width: 474px;
        height: 474px;
        border: 1px solid forestgreen;
        display: flex;
        flex-wrap: wrap;
        transform: rotate(45deg);
        position: relative;
        top: 130px;
    }

    .son1 {
        width: 212px;
        height: 212px;
        border: 1px solid red;
        margin: 10px;
        position: relative;
    }

    .son2 {
        width: 150px;
        height: 150px;
        transform: rotate(-45deg);
        position: absolute;
        top: 34px;
        left: 34px;
    }

效果展示

在这谈谈我对这个图像的理解和做法。
首先写一个div设置为模板，再写一个div为爷爷，给爷爷div套一个父亲div，给父亲div套上一个儿子div, 先将爷爷div进行旋转45deg，现在整个div都进行了旋转，此时的字也进行了旋转，再给儿子div里写一个重孙div,将重孙div进行进行反向旋转。再将儿子div相对定位，后将重孙div绝对定位。
如果，不理解，可以留言，