CSS implementiert den Zahlenbeschriftungsstil

Wenn Sie Shopping-Websites oder Roman-Websites besuchen, werden Sie feststellen, dass neben Produkten oder Roman-Covern Ranking- oder Beliebtheitszeichen stehen. Lassen Sie uns heute darüber sprechen, wie Sie diese Zeichen implementieren können!

CSS-Implementierung des Ranking-Label-Stils

Das heißt:
　

Ich stelle meinen Implementierungsprozess hauptsächlich in den folgenden Schritten vor:

• Erste Implementierungsmethode (erfolglos)

• Nachträgliche Implementierungsmethode (erfolgreich)

• Ursprüngliche Webseiten-Implementierungsmethode

1. Erste Implementierungsmethode

Wenn ich diesen Stil sehe, fällt mir als Erstes ein, dass es möglich sein sollte, CSS zu verwenden. Die Implementierungsmethode ist ein rotes p mit einer bestimmten Breite und Höhe sowie ein weißes Dreieck darunter, um den unteren Teil des roten p abzudecken. Aber wenn man sich den Endeffekt anschaut, sieht es so aus.
　
　

Ich habe festgestellt, dass das Problem hier darin besteht, dass das Dreieck das Bild dahinter verdeckt, was seltsam aussieht. Dann fällt mir als Erstes die Größe des z-index ein, um den Pegel zu ändern. Zunächst muss der Z-Index des roten p größer sein als der Z-Index des Wenn das Dreieck dann das Bild freigeben kann, darf es das rote p nicht verdecken. Das wird also nicht funktionieren.

2. Ändern Sie die Zeichenmethode

Da die obige Methode nicht funktioniert, können Sie feststellen, dass wir nicht das weiße Dreieck unten zeichnen, sondern das kleine Rote Dreiecke auf beiden Seiten. Nachdem die Höhe des roten P reduziert und gespleißt wurde, kann der obige Stil fertiggestellt und das Bild belichtet werden. In Bezug auf den CSS-Code müssen Sie lediglich die folgenden Änderungen vornehmen:

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

zu:

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

Sie können sehen, dass dies der Fall sein wird den Effekt erzielen. Daher gibt es bei der Verwendung von CSS zum Schreiben solcher Grafiken normalerweise mehr als eine Methode, und Sie sollten mehr über die Implementierungsmethode nachdenken.

3. Implementierung der Original-Webseite

Bei der Verwendung von Google F12 für die Original-Webseite habe ich festgestellt, dass das Ranking-Label der Original-Webseite ein Bild ist...

Verwandte Empfehlungen:

CSS3, um einen Balkenprozenteffekt zu erzielen

Detaillierte CSS-Erklärung3 Schatten

Das obige ist der detaillierte Inhalt vonCSS implementiert den Zahlenbeschriftungsstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!