Comment faire une image hexagonale en CSS
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('./eddie.jpg') 50% 50% no-repeat;
background-size: auto 220px;
}
</style>
<body>
<div class='wrap'>
</div>
</body>
</html>(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('./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>
<div class='wrap'>
<div class='left common'></div>
</div>
</body>
</html>(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('./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>
<div class='wrap'>
<div class='left common'></div>
<div class='right common'></div>
</div>
</body>
</html>À 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!
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
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
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)
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
