À propos de la méthode de réalisation d'une image hexagonale en CSS-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

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

不言

Jun 20, 2018 am 10:33 AM

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

À 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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

1 Il y a quelques mois By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7638

Tutoriel CakePHP

1391

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

150

Afficher plus

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Construire une application Ethereum à l'aide de Redwood.js et de la faune Mar 28, 2025 am 09:18 AM

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Apr 02, 2025 am 04:27 AM

Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?

Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Apr 05, 2025 pm 05:51 PM

Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...

See all articles