Comment créer un hexagone avec une image d'arrière-plan en utilisant CSS ?

Hexagone avec image d'arrière-plan

Créer une forme hexagonale en HTML avec CSS est relativement simple. Cependant, ajouter une image dans cet hexagone peut être un peu plus difficile.

Pour obtenir cet effet, on peut exploiter la puissance de CSS3 en utilisant des propriétés de transformation et de débordement. En utilisant différentes valeurs de rotation avec un débordement défini sur caché, il est possible de créer un masque multi-navigateurs qui permet l'ajout d'une image dans la forme hexagonale.

Voici un exemple qui montre comment créer un hexagone avec une image d'arrière-plan :

.hexagon-bg {
    width: 100px;
    height: 86.61px;
    margin: auto;
    border-bottom: 20px solid red;
    position: relative;
    overflow: hidden;
}

.hexagon-bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(background-image.png);
    transform: rotate(30deg);
    position: absolute;
}

<div class="hexagon-bg">
</div>

Cette technique crée un masque multi-navigateur qui permet à l'image d'arrière-plan spécifiée d'apparaître à l'intérieur de la forme hexagonale. Il est important de noter que les anciens navigateurs peuvent ne pas prendre en charge cette fonctionnalité, mais les navigateurs modernes comme Chrome, Firefox et Safari restitueront l'effet comme prévu.

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!