Comment puis-je intégrer des images dans des formes hexagonales à l'aide de HTML et CSS ?

Insérer des images dans des formes hexagonales en HTML/CSS

Question :

Est-ce faisable insérer une image dans une forme hexagonale ? Les cellules hexagonales en HTML sont familières, mais les remplir avec une image d'arrière-plan s'est avéré difficile.

Efforts essayés :

Voici quelques approches qui ont été tentées :

.top {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: red;
  border-left-color: transparent;
}
.middle {
  height: 20px;
  background: red;
  width: 40px;
  display: block;
}
.bottom {
  height: 0;
  width: 0;
  display: block;
  border: 20px solid red;
  border-top-color: red;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

<div class="hexagon pic">
  <span class="top">

Réponse :

Avec l'avènement de CSS3, les possibilités sont illimitées, comme le démontre l'exemple suivant :

.hexagon {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

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

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

Dans cette solution, des chemins de détourage CSS3 sont utilisés pour définir la forme hexagonale, permettant aux images d'y être affichées de manière transparente. . Cette approche est prise en charge par les navigateurs modernes et offre une excellente compatibilité entre navigateurs, garantissant une expérience utilisateur cohérente.

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!