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

韦小宝

Libérer： 2018-03-14 12:48:19

original

7282 Les gens l'ont consulté

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

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

C'est-à-dire :
　
CSS implémente le style détiquette numérique

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.
　
　 CSS implémente le style détiquette numérique

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;
}

Copier après la connexion

à :

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

Copier après la connexion

CSS implémente le style détiquette numérique
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.