Comment implémenter des triangles et des parallélogrammes avec CSS ?

Lorsque je parcourais récemment un site Web technique, j'ai trouvé que le style des mots-clés dans l'article était tellement cool, le style de pagination. Voici une capture d'écran :

Vous pouvez également voir une telle barre de pagination en bas de la page d'accueil, n'est-ce pas joli ? Voyons comment cela est réalisé ~

La première méthode : utiliser border

La première méthode consiste à utiliser le hack d'attribut border pour créer un triangle, puis à joindre les deux via un rectangle Le triangle crée finalement un parallélogramme. Pourquoi des triangles peuvent-ils être générés à l’aide de bordures ? Jetons d'abord un coup d'œil à une image :

Après avoir regardé le processus de changement des trois petites formes de l'image, vous devriez déjà en connaître la moitié. En fait, le piratage ne nécessite que deux conditions pour créer un triangle. Premièrement, la longueur et la largeur de l'élément lui-même sont égales à 0. Deuxièmement, les parties inutiles sont masquées via border-color. Grâce à une méthode similaire, vous pouvez également créer des trapèzes. Les codes des trois formes de l'image ci-dessus sont les suivants.

#first {

largeur : 20px;

hauteur : 20px;

largeur de bordure : 10px;

style de bordure : solide;

border-color: rouge vert bleu marron;

}

#second {

largeur: 0;

hauteur : 0;

largeur de la bordure : 10px;

style de bordure : uni;

couleur de la bordure : rouge vert bleu marron;

}

#troisième {

largeur : 0;

hauteur : 0;

largeur de bordure : 10px;

style de bordure : solid;

border-color: red transparent transparent transparent;

}

L'étape suivante consiste à réfléchir à la manière d'épisser un parallélogramme. Dans la méthode des bordures, il se compose de trois parties, à savoir le triangle gauche, le rectangle et le triangle droit. Il serait trop fastidieux de créer trois éléments à chaque fois qu'un parallélogramme est dessiné, donc les pseudo-éléments :before et :after sont un bon choix ici. Obtenons cet effet :

Afin d'assembler de manière transparente des triangles et des rectangles, plusieurs attributs doivent être cohérents, utilisez donc quelque chose comme Less, Sass, Stylus, etc. être plus facile à maintenir si vous utilisez un préprocesseur CSS pour écrire ce code. La version Scss du code est donnée ci-dessous.

//La largeur et la hauteur du triangle

$hauteur : 24px;

$largeur : 12px;

//Ajuster les couleurs du trois parties du parallélogramme Affectation

@mixin parallélogramme-color($color) {

background: $color;

&:before { border-color: transparent $color $color transparent; }

&:after { border-color: $color transparent transparent $color; }

}

//Style d'un seul triangle

@mixin triangle () {

contenu : '';

affichage : bloc;

largeur : 0;

hauteur : 0;

position : absolue ;

border-style : solide;

border-width : $height/2 $width/2;

top : 0 ;

}

//Style du parallélogramme

.para {

affichage : bloc en ligne ;

position : relative ;

remplissage : 0 10px;

hauteur : $hauteur;

hauteur de la ligne : $hauteur;

marge gauche : $largeur;

couleur : #fff;

&:après {

@include triangle();

droite : -$width;

}

&:avant {

@include triangle();

gauche : -$width;

}

@include parallélogramme -color(red) ;

}

Il est à noter que si la pente du triangle définie par $height et $width est trop petite ou trop grande, cela peut provoquer un alias dans le rendu, vous devez donc tester les différences avant de l'utiliser. Quel est l'effet visuel obtenu par la largeur et la hauteur.

Si vous souhaitez apprendre et communiquer les technologies web front-end telles que html5, et que vous souhaitez en savoir plus sur le contenu front-end, vous pouvez rejoindre notre groupe d'apprentissage QQ : 27062964, apprendre et communiquer ensemble, vous améliorer , et disposer de matériel d'apprentissage et de partage de code source. Ou cliquez sur le lien pour rejoindre directement le groupe :

Deuxième méthode : Utiliser la transformation

Utiliser la transformation pour implémenter un parallélogramme L'effet est à peu près comme ceci :

Après l'avoir vu, j'ai trouvé ça incroyable. Il s'avère qu'il ne peut avoir que le contour d'un parallélogramme. (Car méthode on ne peut créer qu'un parallélogramme avec un effet de remplissage) Elle est très simple à implémenter, principalement à l'aide de transform : skew(...).

.city {

affichage : bloc en ligne ;

remplissage : 5px 20px;

bordure : 1px solide #44a5fc ;

couleur : #333;

transformation : inclinaison (-20deg);

}

Shanghai

Nous avons donc obtenu cet effet :

Vous devez penser à cela lorsque vous voyez la photo :

Ne vous inquiétez pas, nous avons effectivement déformé l'ensemble du div, provoquant une inclinaison du texte au milieu, et ce n'est évidemment pas l'effet souhaité. Nous devons donc ajouter un élément interne et déformer à l'envers l'élément interne pour obtenir l'effet souhaité :

Le code d'implémentation est le suivant, et un CodePen est joint Exemple

.city {

affichage : bloc en ligne ;

rembourrage : 5px 20px;

bordure : 1px solide # 44a5fc ;

couleur : #333;

transformation : inclinaison (-20deg);

}

.city div {

transformation : skew(20deg);

}

Shanghai

Résumé

La première méthode utilise l'attribut border hack pour créer un triangle, et réalise enfin un parallélogramme en épissant trois éléments et la deuxième méthode utilise ensuite transform: skew ; pour obtenir le parallélogramme. Dans l’ensemble, la deuxième méthode est beaucoup plus petite que la première et facile à comprendre. Le seul inconvénient est qu'il ne peut pas construire de trapèzes comme ceux utilisés dans la pagination de ce site.

J'espère que cet article vous sera utile.

Si vous rencontrez des problèmes pendant le processus d'apprentissage ou souhaitez obtenir des ressources d'apprentissage, vous êtes invités à rejoindre le groupe d'échange d'apprentissage

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!