CSS pour créer un arrière-plan d'image rempli d'hexagones

Cette fois, je vais vous apporter du CSS pour créer des hexagones remplis d'arrière-plans d'images. Quelles sont les précautions pour utiliser CSS pour créer des hexagones remplis d'arrière-plans d'images. Voici un cas pratique. une fois.

Le principe de réalisation de l'hexagone est en fait obtenu en faisant tourner trois rectangles qui se chevauchent, comme le montre la figure ci-dessous :

Afin d'obtenir un hexagone positif, les deux rectangles sont pivotés. L'angle doit être -60deg et 60deg, et le rapport hauteur/largeur du rectangle doit être Math.sqrt(3): 1

Nous devons donc d'abord créer trois rectangles :

    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

Nous définissons la largeur et la hauteur des trois rectangles mesurent respectivement 60 px et 104 px, la couleur d'arrière-plan est bleue, .hexagonitem_left est pivoté de -60deg, .hexagonitem_right est pivoté de 60deg et .hexagonitem_center n'est pas pivoté.

      .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }
        .hexagonitem {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .hexagonitem_left {
            transform: rotate(-60deg);
        }
        .hexagonitem_right {
            transform: rotate(60deg);
        }

De cette façon, vous pouvez simplement obtenir un hexagone régulier.

Alors, comment pouvons-nous transformer le fond bleu en image ? C'est en fait très simple. Les trois rectangles mentionnés ci-dessus ne jouent en fait qu'un rôle de modelage. En fait, ils doivent être réglés sur visibilité . : caché, nous devons ajouter un élément enfant rectangulaire à chacun des trois rectangles et le définir sur visibilité : visible.

La largeur et la hauteur des trois éléments enfants doivent simplement couvrir l'hexagone bleu précédent.

Le code est le suivant, vous pouvez l'étudier attentivement

    
    
    
    
    


    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site php chinois !

Lecture recommandée :

Comment utiliser le modèle de boîte bizarre CSS et le modèle de boîte standard

CSS pour implémenter la disposition en accordéon

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!