A few ways to write tips in pure CSS

A lot of small tips have been used recently in the project, I've been looking for a set of UI controls to use. Even if finished, has not been to control how this thing is done, but probably know how this thing to achieve, but a set of UI is too big, tips is that some of the UI accessories , there is no need to so selectmen, and think of these gadgets are also on the style of things, decided to solve their own on the spot, it is natural to draw out today this article ...

The main tips on the length of the following figure this virtue, is a demo, so the more ugly.

Today's theme is this little tips, but there are some articles can do, I mainly introduce three methods, there may be more methods, but in a short period of time can only figure out the following three ways:

The first: With the help of pictures

This method is estimated to be commonly used methods, the following small triangle everyone first idea should be the picture, the principle is very simple, HTML code is probably the following structure

Div is the tip of the container, span is put tips small mouth of the picture, give span set a small mouth background on the line, the CSS code as follows:

This is the tips of the small mouth of the picture (./tips.png): (Amount ... Do not cut good, make do with it, to learn mainly)

The advantage of this method is: simple, good understanding, a learning will. First of all, the position relative positioning of the container elements is for tips of the small mouth of the absolute positioning can find the base of the parent element, and then the span of the absolute positioning is to put a small mouth position, with top and left to control.

The second: With the help of CSS border features

This skill is more flexible than using pictures, picture is a very annoying thing, need more than one HTTP request, familiar with the Web page performance optimization of the friend should be very respectful of the pictures are very shy, can not use, and with pictures, want to change a larger or smaller tips small mouth relatively complex, Well, don't talk nonsense, introduce the principle of the second method:

The border of CSS contains the skill of a cow fork is to draw a triangle, the concrete principle can refer to Http://blog.sina.com.cn/s/blog_ 74d6cedd0100z0os.html, this man said or relatively in place, since can use CSS to draw a triangle, then why not draw a direct replacement tips small mouth picture?? Well, on the code, the HTML structure of this method is shown in the following illustration:

Why do you have two spans this time? Because we want to draw a triangle with border, similar to the hollow triangle, canvas drawing experience friends know that hollow dongdong have to do so, so we use tips-out to represent the outside of the border gray Triangle, tips-in to represent the yellow triangle inside , the specific style code is shown in the following illustration:

This inside is to draw out two triangles, we are with the help of the top positioning of two triangles staggered 1px, forming a border visual effect ~

The third type: with special symbols

Unicode encoding supports a number of special symbols, which are a valuable asset to the front-end development, because these symbols are a piece of ready-made pictures, but do not launch an HTTP request, this kind of thing does not need words, there is justice? We need a special symbol to do this little tips today:

This is a triangle. All right, list the HTML code:

And with the help of border characteristics, need two triangles to draw a triangle with border, in this case, in fact, to control the tips of the size and color of small mouth, we actually just control the two span of font-size and colors, OK, we continue to look at the CSS code, It's a very similar fact now:

This piece of CSS is also through Postion:absolute; Top and left values control the position of the two triangles to achieve the visual effect of the small mouth forming tips.

Well, tips are actually very interesting, I personally prefer the third method, first CSS is very short is not difficult to understand, and did not use the picture, and in the regular project development I will try to use these powerful special symbols, can not use pictures without pictures. Of course, there may be a lot of tips, I have the right to be regarded as a kind of a good idea.