Implement the tooltip prompt box with pure CSS, CSS arrows and the continuation of the shape-Add a border to the entire tooltip prompt box

Implement the tooltip prompt box with pure CSS, CSS arrows and the continuation of the shape-Add a border to the entire tooltip prompt box

In the previous article, we introduced the tooltip prompt box for pure CSS implementation, which is the CSS arrow and shape.

However, it must be noted that it is always an element, only implemented through CSS. Today we want to add a border to the tooltip prompt box, the following is an article completed (For details, refer to: tooltip prompt box, CSS arrow and shape for pure CSS implementation ):

First, we will introduce the ": before" selector in another CSS, like "after ".

Definition and usage: (See w3school: before selector)

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

Example:

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

View Code

The following step adds a border to the tooltip as a whole:

First, the HTML code:

View Code

Let's set the style of the box.

View Code

:

(For details about the position setting, refer to the previous explanation. Thank you ~~)

Next, "introduce" The Arrow. Note that the ": after" and ": before" CSS selectors are used to generate arrows of different sizes at the same time. The basic style is as follows:

View Code

:

To continue, we need to set the border and style for the yellow and green squares:

View Code

:

In addition, we can remove the yellow and green squares by removing the height and width of after and before. Only the light green and red boxes are left, they are the border of the yellow and green blocks. style:

View Code

:

Note that the red border is overwritten, so we need to add pixels to the light green and red squares, but the added pixel values are different from each other, for future preparation, style:

View Code

:

Note: here we change the pixel value of the pale green border from 5px to 10px, and the red border from 5px to 15px, for example, however, it is worth noting that the light green box and red box are the same as the yellow and green boxes on the top, but they are different in nature. One is the border, one is square ~~ The implementation arrow is implemented through the border. For the principle, see the previous article to implement the tooltip prompt box, CSS arrow and shape of pure CSS.

The arrow and style are as follows:

View Code

:

Then we use position: absolute's top, right, bottom, left, and TRBL to set the position and border (here it refers to the red border, which will be the border of the arrow), style:

View Code

:

Next, set the border of the gray box to Red. The border size is the same as that of the red box. At the same time, change the light green arrow to gray to make it look like a whole. style:

View Code

:

The border 2.75px of the gray box is calculated based on the width of the red part of the arrow border ~~ Mathematical questions!

Now, let's continue writing. Add a border to the tooltip prompt box! You can modify the specific color styles as required ~~