Maison >interface Web >tutoriel CSS >À propos de la méthode de réalisation d'une image hexagonale en CSS
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 :
<!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='wrap'> </p> </body> </html>L'effet est une image
<!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='wrap'> <p class='left common'></p> </p> </body> </html>L'effet est la suivante :
<!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='wrap'> <p class='left common'></p> <p class='right common'></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!