Das CSS3-Diamantpuzzle realisiert die Funktion, nur das Div zu drehen und das Hintergrundbild nicht zu drehen

<Vorlage>
    <Abschnitt Klasse="Box">
        <div Klasse="bg" :style="{ Hintergrundbild: `url(${bgImg}) ` }"></div>
        <div v-if="item1Show" class="item item1" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item2Show" class="item item2" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item3Show" class="item item3" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item4Show" class="item item4" :style="{ backgroundImage: `url(${bgImg}) ` }"></div>
        <div v-if="item5Anzeigen" class="item item5wrap">
            <div Klasse="item5" :style="{ Hintergrundbild: `url(${bgImg}) ` }"></div>
        </div>
    </Abschnitt>
</Vorlage>
<Skript>
importiere bgImg aus "@/assets/bg.jpeg";
Standard exportieren {
    Daten() {
        zurückkehren {
            bgImg,
            item1Show: false,
            item2Show: true,
            item3Show: true,
            item4Show: true,
            item5Anzeigen: true
        };
    }
};
</Skript>
<style lang="less">
@borderColor: #333;
.Kasten {
    Rand: 0px automatisch;
    Breite: 300px;
    Höhe: 200px;
    Hintergrundfarbe: #000;
    Position: relativ;
    .bg {
        Breite: 100 %;
        Höhe: 100%;
        Position: absolut;
        links: 0;
        oben: 0;
        Hintergrundposition: Mitte Mitte;
        Hintergrundwiederholung: keine Wiederholung;
        Hintergrundgröße: 100 % 100 %;
        Deckkraft: 0,5;
    }
    .Artikel {
        Breite: 50%;
        Höhe: 50%;
        Box-Größe: Rahmenbox;
        Hintergrundgröße: 200 % 200 %;
        Rahmen rechts: 1px durchgezogen @borderColor;
        Rahmen unten: 1px durchgezogen @borderColor;
        Position: absolut;
    }
    .Artikel1 {
        Hintergrundposition: 0 0;
        links: 0;
        oben: 0;
    }
    .item2 {
        Hintergrundposition: 100 % 0;
        links: 50%;
        oben: 0;
    }
    .item3 {
        Hintergrundposition: 0 100 %;
        links: 0;
        oben: 50 %;
    }
    .item4 {
        Hintergrundposition: 100 % 100 %;
        links: 50%;
        oben: 50 %;
    }
    .item5wrap {
        Breite: 100px;
        Höhe: 100px;
        Rahmen links: 1px durchgezogen @borderColor;
        Rahmen oben: 1px durchgezogen @borderColor;
        transformieren: drehen (45 Grad);
        links: 50%;
        oben: 50 %;            
        transformieren: verschieben (-50 %, -50 %) drehen (45 Grad);
        Überlauf: versteckt;
        .item5 {
            Breite: 150px;
            Höhe: 150px;
            Hintergrundposition: 50 % 50 %;
            Hintergrundgröße: 200 % 133 %;
            Position: absolut;
            links: 50%;
            oben: 50 %;
            transformieren: verschieben (-50 %, -50 %) drehen (-45 Grad);
        }
    }
}
</Stil>