Comment faire une image hexagonale en CSS-tutoriel CSS-php.cn

Comment faire une image hexagonale en CSS

php中世界最好的语言

Libérer： 2018-01-30 10:31:24

original

2425 Les gens l'ont consulté

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.

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

(1) Ensuite, la première étape consiste bien sûr à dessiner le conteneur. Le conteneur est un div 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 divs de même largeur et hauteur (comme le montre la figure ci-dessous, donc la largeur et la hauteur du div doivent satisfaire √3 fois les conditions pour former un hexagone régulier. Je ne vous apprendrai pas ici comment calculer cette valeur. Si cela vous intéresse, vous pouvez utiliser des fonctions trigonométriques pour la calculer vous-même

Ici, je règle. la largeur du conteneur extérieur doit être de 190 px, la hauteur de 110 px, puis définissez 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>
    <div class=&#39;wrap&#39;>
    </div>
</body>
</html>

Copier après la connexion

(2) Dans la deuxième étape, dessinez le div gauche et son pseudo. -element image

Dans cette étape, utilisez le nouveau div Positionnez le côté gauche de l'hexagone pivoté, définissez la largeur et la hauteur du nouveau pseudo-élément div et définissez l'image d'arrière-plan cohérente avec l'image ci-dessus. que la largeur et la hauteur du nouveau pseudo-élément div sont la largeur et la hauteur de l'hexagone entier, puis faites pivoter le pseudo-élément. L'élément fait apparaître l'image verticalement (le nouveau div doit être pivoté, donc l'image du pseudo-élément est. également pivoté, il doit donc être retourné à l'angle normal) et la position du pseudo-élément doit être ajustée (le nouveau div est tourné, ce qui affecte la position de positionnement du pseudo-élément. Enfin, définissez le). nouveau div à dépasser caché, 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>
    <div class=&#39;wrap&#39;>
        <div class=&#39;left common&#39;></div>
     
    </div>
</body>
</html>

Copier après la connexion

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

Cette étape Le principe est le même que la deuxième partie, mais l'angle est inversé, je n'entrerai donc pas dans les détails. Téléchargez simplement le 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>
    <div class=&#39;wrap&#39;>
        <div class=&#39;left common&#39;></div>
        <div class=&#39;right common&#39;></div>
    </div>
</body>
</html>

Copier après la connexion

À ce stade, vous pouvez montrer l'image en bas. début de l'article. En utilisant ce principe, vous pouvez également créer d'autres formes d'effets d'affichage d'images. Vous êtes invités à continuer à étudier. À l'avenir, l'affichage d'images ne sera plus une seule brique

. Je pense que vous maîtrisez la méthode après avoir lu ces cas. Veuillez prêter attention aux autres articles connexes sur le site Web chinois php

Lecture connexe :

Comment la liste déroulante HTML5 devrait augmenter ! expérience utilisateur

Comment utiliser le WebGL de H5 pour créer des graphiques json et echarts sur la même interface

Comment utiliser les nouvelles fonctionnalités de balises sémantiques de H5

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!