Puis-je afficher une image à l'intérieur d'un hexagone en utilisant HTML et CSS ?

Hexagone avec image à l'intérieur

Question

Est-il possible d'afficher une image dans une forme hexagonale en HTML/CSS ?

Solution proposée

Une approche pour y parvenir consiste à implémenter un masque d'écrêtage à l'aide de CSS3 transformations.

Implémentation

Tout d'abord, définissez la forme de l'hexagone à l'aide de la classe CSS suivante :

.hexagon {
  --base: 20px;
  --height: calc(var(--base) * sqrt(3) / 2);

  position: relative;
  width: var(--base) * 2;
  height: var(--height) * 2;
}

Ensuite, utilisez le débordement caché et les transformations CSS pour créer le masque hexagonal et placez l'image à l'intérieur :

.hexagon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  clip-path: polygon(
    0 0,
    calc(100% - var(--base)) 0,
    100% calc(var(--height) * 0.5),
    100% calc(var(--height) * 1.5),
    calc(100% - var(--base)) 100%,
    0 100%
  );
}

Voici un exemple code :

<div class="hexagon">
  <img src="image.jpg" alt="Image inside hexagon" />
</div>

Considérations

Cette solution offre à la fois une compatibilité entre navigateurs et des zones masquées cliquables. En tirant parti des transformations CSS3, il permet de travailler de manière flexible avec des formes non rectangulaires.

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!