Maison > Article > interface Web > À propos de la méthode de réalisation d'une image hexagonale en CSS

À propos de la méthode de réalisation d'une image hexagonale en CSS

不言original: 2018-06-20 10:33:081744parcourir

Cet article présente principalement l'exemple de code pour réaliser des images hexagonales avec CSS. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

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(&#39;./eddie.jpg&#39;) 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 image de pseudo-é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 pseudo-élément du nouveau p et définir une image d'arrière-plan cohérente avec l'image ci-dessus. Faites attention à la largeur et à la hauteur du nouveau pseudo-élément p, c'est-à-dire la largeur et la hauteur de l'hexagone entier. 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(&#39;./eddie.jpg&#39;) 50% 50% no-repeat; 
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
23 
    }
    .common:before{
        content:&#39;&#39;;
        position: absolute;
        background:url(&#39;./eddie.jpg&#39;) 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é, donc je n'entrerai 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(&#39;./eddie.jpg&#39;) 50% 50% no-repeat; 
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;

    }
    .common:before{
        content:&#39;&#39;;
        position: absolute;
        background:url(&#39;./eddie.jpg&#39;) 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 ! !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez CSS3 pour obtenir des effets d'entraînement et H5 pour obtenir des effets de vagues dynamiques

Comment configurer CSS Couleur de la police du texte

Comment dessiner une animation de cercle de chargement avec CSS3

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!

php css css3 伪元素

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：Comment personnaliser l'effet de la case à cocher avec CSS et HTMLArticle suivant：Comment personnaliser l'effet de la case à cocher avec CSS et HTML

Articles Liés

Voir plus