Comment obtenir des effets spéciaux de boutons hexagonaux

Cette fois, je vais vous montrer comment réaliser des effets spéciaux de bouton hexagonal et quelles sont les précautions à prendre pour réaliser des effets spéciaux de bouton hexagonal. Voici un cas pratique, jetons un oeil.

Interprétation du code

Définir dom, le conteneur ne contient qu'un seul bouton :

<nav>
    <ul>
        <li>Home</li>
    </ul>
</nav>

Définir le style du bouton :

nav {
    --h: 3em;
}
nav ul {
    padding: 0;
}
nav ul li {
    list-style-type: none;
    width: calc(var(--h) * 1.732);
    height: var(--h);
    background-color: #333;
    color: white;
    font-family: sans-serif;
    text-align: center;
    line-height: var(--h);
}

Utiliser des pseudo-éléments Ajouter 2 rectangles inclinés :

nav ul li {
    position: relative;
}
nav ul li::before,
nav ul li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-color: #333;
}
nav ul li::before{
    transform: rotate(60deg) translateX(calc(var(--h) * -2));
}
nav ul li::after{
    transform: rotate(-60deg) translateX(calc(var(--h) * 2));
}

Ajouter un effet de survol de la souris :

nav ul li::before,
nav ul li::after {
    z-index: -1;
    filter: opacity(0);
    transition: 0.3s;
}
nav ul li:hover::before {
    filter: opacity(1);
    transform: rotate(60deg) translateX(0);
}
nav ul li:hover::after {
    filter: opacity(1);
    transform: rotate(-60deg) translateX(0);
}

Ajouter plusieurs boutons au dom pour former un groupe de boutons :

<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>

Quitter une marge entre les boutons pour l'effet de survol :

nav ul li {
    margin: 2em;
}

Ajoutez deux autres jeux de boutons :

<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>

    

        
Home
        
Product Vs
        
Services
        
Contact
    

Enfin, essayez quelques variantes :

nav {
    --h: 3em;
}
nav:nth-child(1) {
    --rate: 1.5;
    --bgcolor: black;
}
nav:nth-child(2) {
    --rate: 1.732;
    --bgcolor: brown;
}
nav:nth-child(3) {
    --rate: 2;
    --bgcolor: green;
}
nav ul li {
    width: calc(var(--h) * var(--rate));
    background-color: var(--bgcolor);
}
nav ul li::before,
nav ul li::after {
    background-color: var(--bgcolor);
}

Terminé !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour mettre en œuvre l'effet de séjour du carrousel JS

La méthode étape par étape de exécution des instructions de service de nœud en arrière-plan Linux

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!