CSS implements number label style

韦小宝

Release： 2018-03-14 12:48:19

Original

7280 people have browsed it

When you visit shopping websites or novel websites, you will find that there are ranking or popularity signs next to the products or novel covers. So let’s talk about how to achieve these signs today!

CSS implementation of ranking label style

CSS implements number label style

## That is:

　

CSS implements number label style

Mainly introduce my implementation process in the following steps:

Initial implementation method (unsuccessful)
Subsequent implementation method (successful)
Original web page implementation method

1. Initial implementation method

When I see this style, the first thing that comes to mind is that it should be possible to use CSS. The way to achieve this is to have a red p with a certain

width and height, plus a white triangle below to cover the lower part of the red p. But when you look at the final effect, this is what it looks like. 　
　
CSS implements number label style

I found that the problem here is that the triangle will cover the picture behind it, which looks strange. Then the first solution that comes to mind is to adjust the size of

z-index to change the level. First of all, the z-index of the red p must be greater than the z-index of the picture. Then if the triangle can expose the picture, it must not be able to cover the red p. So this won't work.

2. Change the drawing method

Since the above method does not work, you can find that if we draw not the white triangle at the bottom, but the small red triangles on both sides, After reducing the height of the red p and splicing it again, the above style can be completed and the picture can be exposed. In terms of CSS code, you only need to make the following changes

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

Copy after login

Change to:

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

Copy after login

CSS implements number label style You can see that the effect will be achieved. Therefore, when using CSS to write such graphics, there is usually more than one method, and you should think more about the implementation method.

3. Implementation of the original webpage

Using Google F12 to realize the original webpage, I discovered that the ranking label of the original webpage is a picture...

Related recommendations:

css3 Realize the bar percentage effect

# #css3 Detailed explanation of shadow

The above is the detailed content of CSS implements number label style. For more information, please follow other related articles on the PHP Chinese website!