CSS implémente le style d'étiquette numérique

Lorsque vous visitez des sites Web d'achats ou des sites Web de romans, vous constaterez qu'il y a des signes de classement ou de popularité à côté des produits ou des couvertures de romans. Parlons donc de la façon de mettre en œuvre ces signes aujourd'hui !

Implémentation CSS du style d'étiquette de classement

C'est-à-dire :
　

Je présente principalement mon processus de mise en œuvre dans les étapes suivantes :

• Méthode de mise en œuvre initiale (infructueuse)

• Méthode de mise en œuvre ultérieure (réussie)

• Méthode de mise en œuvre originale de la page Web

1. Méthode d'implémentation initiale

Quand je vois ce style, la première chose qui me vient à l'esprit est qu'il devrait être possible d'utiliser CSS. La méthode de mise en œuvre est un p rouge avec une certaine largeur et hauteur, plus un triangle blanc en dessous pour couvrir la partie inférieure du p rouge. Mais quand on regarde l’effet final, voici à quoi il ressemble.
　
　

J'ai trouvé que le problème ici est que le triangle couvrira l'image derrière lui, ce qui semble étrange. Ensuite la première solution qui vient à l'esprit est d'ajuster la taille du z-index pour changer le niveau. Tout d'abord, le z-index du p rouge doit être supérieur au z-index du. image. Alors si le triangle peut révéler l'image, il ne doit pas pouvoir recouvrir le p rouge. Donc ça ne marchera pas.

2. Changez la méthode de dessin

Puisque la méthode ci-dessus ne fonctionne pas, vous pouvez constater que si nous dessinons non pas le triangle blanc en bas, mais le petit triangles rouges des deux côtés, après avoir réduit la hauteur du p rouge et l'avoir épissé à nouveau, le style ci-dessus peut être complété et l'image peut être exposée. Au niveau du code CSS, il vous suffit d'apporter les modifications suivantes :

.trangle {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 10px solid #fff;
}

à :

.trangle {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 10px solid #fff;
}

Vous pouvez voir que cela obtenir l'effet. Par conséquent, lorsque vous utilisez CSS pour écrire de tels graphiques, il existe généralement plusieurs méthodes et vous devriez réfléchir davantage à la méthode d'implémentation.

3. Implémentation de la page Web d'origine

En utilisant Google F12 pour la page Web d'origine, j'ai découvert que l'étiquette de classement de la page Web d'origine est une image...

Recommandations associées :

css3 pour obtenir un effet de pourcentage de barre

Explication détaillée du CSS3 ombres

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!