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.
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>
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 nouveau pseudo-élément p et définir une image d'arrière-plan cohérente avec l'image ci-dessus . Notez que la largeur et la hauteur du nouveau pseudo-élément p correspondent à l'hexagone entier. La largeur et la hauteur du bord. 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('./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>
<!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>
Animation de séquence d'animation CSS3
Comment utiliser le modèle de boîte bizarre CSS et le modèle de boîte standard
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!