Méthode CSS pour implémenter la page à onglet échelle-tutoriel CSS-php.cn

Méthode CSS pour implémenter la page à onglet échelle

小云云

Libérer： 2017-12-05 15:47:58

original

1867 Les gens l'ont consulté

Dans la conception Web, les onglets trapézoïdaux sont une forme très courante, mais le trapèze est un style difficile à mettre en œuvre. De nombreux développeurs utiliseront directement des images d'arrière-plan trapézoïdales pour générer des effets, mais utiliser des images d'arrière-plan n'est pas une solution. manière très idéale. Ici, l'auteur vous propose une méthode pour utiliser directement CSS pour obtenir l'effet trapézoïdal.

Prenons un simple p comme exemple :

<p class="p">这是一个梯形</p>

Copier après la connexion

.p{
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}
.p::before{
    content: &#39;&#39;; /*用伪元素来生成一个矩形*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

Copier après la connexion

Si nous déformons directement en 3D le nœud de l'élément, le contenu de l'élément sera également déformé. Il s'agit d'un effet indésirable, donc des pseudo-éléments sont utilisés ici pour déformer l'effet souhaité. être obtenu en appliquant l’effet aux pseudo-éléments. Ici, lors de la déformation, nous avons fixé le fond, et sa hauteur va changer, utilisez donc scaleY(1.3) pour compenser son retrait en hauteur. Les lecteurs peuvent supprimer scaleY(1.3)和transform-origin pour comparer les effets. Ici, je montre les deux résultats :

Méthode CSS pour implémenter la page à onglet échelle
.

Voici le résultat sans scaleY et transform-origin

Voici le résultat de style produit par le code ci-dessus

Depuis un trapèze Une fois la balise est généré, nous pouvons en outre générer plusieurs pages de balises. Ici, je vais vous donner un exemple simple.

<nav>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">About</a>
</nav>

Copier après la connexion

nav>a{
    position: relative;
    display: inline-block;
    padding: .3em 1em 0;
}
nav>a::before{
    content: &#39;&#39;;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #ccc;
    background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));
    border: 1px solid rgba(0,0,0,.4);
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

Copier après la connexion

Le rendu résultant est comme ceci :

Méthode CSS pour implémenter la page à onglet échelle

Les lecteurs peuvent modifier les propriétés de transform-origin en : gauche, droite, bas gauche, gauche droite, etc. pour voir différents effets. l'auteur vous donnera Afficher plusieurs effets :

Méthode CSS pour implémenter la page à onglet échelle