Maison > Article > interface Web > Comment faire une image hexagonale en CSS

Comment faire une image hexagonale en CSS

php中世界最好的语言original: 2018-03-20 16:51:141884parcourir

Cette fois je vais vous montrer comment faire une image hexagonale avec CSS. Quelles sont les précautions pour faire une image hexagonale avec CSS. Voici un cas pratique, jetons un oeil.

Cet article présente principalement l'exemple de code pour réaliser des images hexagonales avec CSS et le partage avec tout le monde. Les détails sont les suivants :

Si rien d'autre, parlons d'abord de l'effet :

Utilisez un simple p avec des pseudo-éléments pour « dessiner » cette image hexagonale. Le principe est que trois p de même largeur et hauteur sont assemblés en un hexagone par positionnement et rotation, puis utilisées, les images d'arrière-plan sont superposées pour former une image visuellement complète. Mettons-le en œuvre étape par étape.

(1) Ensuite, la première étape consiste bien sûr à dessiner le conteneur. Le conteneur est un p avec une largeur et une hauteur.

Avant de dessiner, vous devez comprendre un problème, c'est-à-dire qu'un hexagone équilatéral est composé de trois p de même largeur et hauteur (comme le montre la figure ci-dessous), donc la largeur et la hauteur de p doivent satisfaire √ Seulement trois fois les conditions peuvent être utilisées pour former un hexagone régulier. Je ne vous montrerai pas ici comment calculer cette valeur. Si cela vous intéresse, vous pouvez utiliser des fonctions trigonométriques pour la calculer vous-même en privé.

Ici, je règle la largeur du conteneur extérieur à 190 px, la hauteur à 110 px, puis je définis l'image d'arrière-plan. Le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url('./eddie.jpg') 50% 50% no-repeat; 
        background-size: auto 220px;
    }
</style>
<body>
    <p class=&#39;wrap&#39;>
    </p>
</body>
</html>

L'effet est une image

(2) Dans la deuxième étape, dessinez le p gauche et son pseudo- image de l'élément

Dans cette étape, utilisez le nouveau p pour positionner et faire pivoter le côté gauche de l'hexagone, définir la largeur et la hauteur du nouveau pseudo-élément p et définir une image d'arrière-plan cohérente avec l'image ci-dessus . Notez que la largeur et la hauteur du nouveau pseudo-élément p correspondent à l'hexagone entier. La largeur et la hauteur du bord. Faites ensuite pivoter le pseudo-élément pour afficher l'image verticalement (le nouveau p doit être pivoté, donc l'image du pseudo-élément est également tournée, elle doit donc être pivotée en sens inverse pour revenir à l'angle normal) et la position du pseudo-élément doit être ajustée. (le nouveau p est tourné, ce qui affecte le positionnement du pseudo-élément) position), enfin définissez ce nouveau p pour qu'il dépasse la valeur cachée, et le côté gauche de l'hexagone est dessiné

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url('./eddie.jpg') 50% 50% no-repeat; 
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
23 
    }
    .common:before{
        content:'';
        position: absolute;
        background:url('./eddie.jpg') 50% 50% no-repeat;
        background-size: auto 220px;
        width: 190px;
        height: 220px;
    }
    .left{
        transform: rotate(60deg);
    }
    .left:before{
        transform: rotate(-60deg) translate(48px,-28px);
    }
</style>
<body>
    <p class=&#39;wrap&#39;>
        <p class=&#39;left common&#39;></p>
    
    </p>
</body>
</html>

L'effet est la suivante :

(3) La troisième étape consiste à dessiner le p droit et son image pseudo-élément

Le principe de cette étape est le pareil que la deuxième étape, mais l'angle est inversé, je n'entrerai donc pas dans les détails et passerai directement au code complet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url('./eddie.jpg') 50% 50% no-repeat; 
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
    }
    .common:before{
        content:'';
        position: absolute;
        background:url('./eddie.jpg') 50% 50% no-repeat;
        background-size: auto 220px;
        width: 190px;
        height: 220px;
    }
    .left{
        transform: rotate(60deg);
    }
    .left:before{
        transform: rotate(-60deg) translate(48px,-28px);
    }
    .right{
        transform: rotate(-60deg);
    }
    .right:before{
         transform: rotate(60deg) translate(48px,28px);
         bottom: 0;
    }
</style>
<body>
    <p class=&#39;wrap&#39;>
        <p class=&#39;left common&#39;></p>
        <p class=&#39;right common&#39;></p>
    </p>
</body>
</html>

À ce stade, l'image au début de l'article peut être affiché En utilisant ce principe, vous pouvez également créer d’autres effets d’affichage d’image sous différentes formes. Bienvenue pour poursuivre vos recherches. À l’avenir, l’affichage des images ne se résumera plus à une seule ligne de briques ! !

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 aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Animation de séquence d'animation CSS3

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Amélioration progressive et dégradation gracieuse de CSS3Article suivant：Amélioration progressive et dégradation gracieuse de CSS3

Articles Liés

Voir plus