CSS implements a digital label style

Everyone in the shopping site or the novel site will find that there is a product or novel cover map next to the rankings or popular signs, then we today to talk about how to achieve these signs of it!

CSS Implementation leaderboard Tag style

That
　　

The following are the main steps to introduce my implementation process:

• Initial implementation method (unsuccessful)

• Subsequent implementation methods (success)

• Original Web page Implementation method

1. Initial implementation method

The first thing to think about when you look at this style is that you should be able to implement it using CSS. The implementation is a fixed width and height of the red p, plus a white triangle below the lower part of the red P can be achieved. But at the end of the day it looks like this.
　　
　　

The problem with finding out here is that the triangles will obscure the images behind them and look strange. So the first thought of the solution is to adjust the z-index size to change the level, the first red P z-index must be greater than the z-index of the picture, then if the triangle can reveal the picture will not cover the red p. So it doesn't work.

2. Change of drawing

Since the above method is not possible, then you can find that if we do not draw the bottom of the white triangle, but the painting on both sides of the red triangle, in the reduction of the height of the red p, and then splicing a bit, then you can complete the above style, and can reveal the picture. In the CSS code, only the following changes need to be made

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

Switch

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

You can see that this will achieve the effect. Therefore, when using CSS to write such graphics, the method is mostly more than one, or should think more about the implementation method.

3. Original Web page implementation

Google F12 The original page, only to find that the original page of the leaderboard tag is a picture ah ...

Related recommendations:

CSS3 achieve bar percent effect

CSS3 The shadow of the detailed