Implement tooltip prompt boxes, CSS arrows, and shapes with pure CSS

Implement tooltip prompt boxes, CSS arrows, and shapes with pure CSS

This section describes how to use CSS to make prompt boxes, arrows, and other shapes like tooltip!

First introduce CSS: after Selector

Definition and usage: (See w3school: after selector)

: The after selector inserts content after the content of the selected element and uses the content attribute to specify the content to be inserted.

Example:

P: after {content: "line:-"; background-color: yellow; color: red; font-weight: bold ;}

View Code

For details, refer to w3school!

The following describes how to use the "after" selector to create a CSS arrow and other prompt boxes: (here we will make a simple design step by step. The content added in each step is the style code content added in the previous step, note the difference !)
First, our HTML code:

View Code

Let's set the style of the box:

View Code

:

Note that the position attribute is set to relative to allow us to set our "Arrow" (which has not yet appeared) to absolutely locate and keep it in touch with our box!

Next, insert the "Arrow" (not displayed yet) to the basic style:

View Code

:

You will notice something. 1. We just inserted a yellow square, which is the square we will design as an arrow; 2. We set absolute positioning for absolute so that we can move it to the desired location!

Next, set the border for the yellow square (the predecessor of the "Arrow"). The border here is the object of the arrow and the content of the yellow square is removed (by setting. demo: remove the yellow square from the style "height: 0; width: 0" in "after". Here we omit the height and width of the yellow square ):

View Code

:

Now we can design the gray box as an arrow:

View Code

:

OK! We can see the arrow forming!

Let's set the position as we want (the arrow in this example moves to the lower end ):

View Code

:

It's basically done here.

Under the overall style design below (in fact, the background color of the box is changed to be the same as that of the arrow ):

View Code

:

You can set the specific style! For example, you can move the arrow to the other three sides and set border-T \ R \ B \ L-color: gray; and TRBL (TRBL refers to top \ right \ bottom \ left!

Of course, you must note that the size of the border is not included in the size of the box! Therefore, pay attention to the impact of margin during design. For example, if the arrow is centered in the lower border, we need to add "margin-left:-10px;" at the same time!

Conclusion: Comments from yy duckweed's life (concise image ~~ Haha ~~) :

Design Principle of this example: Set the width and height of the pseudo-class selector box to 0, and the border area is [X]. The other three sides are transparent, so a triangle is displayed!

(For more information, see YUI Team: CSS Quick Tip: CSS Arrows and Shapes Without Markup)