Using CSS to implement a fully compatible ToolTip prompt box

Final Effect Diagram:

Basic principle

First set a background color of the ordinary div box, and then use the Last post to the Triangle icon, the div box set to the relative positioning mode, triangular icon set to absolute positioning, position relative to the div box, adjust to the appropriate position. This gets a basic ToolTip, but without the border it always looks uncomfortable, we can set a border on the Div box, which is not difficult, but how does the triangle icon set the border? Here we use a tricky way to overlay two different color triangle icons, And the position staggered 1px, so that the bottom triangle top border is covered, only exposing the left and right border parts, superimposed together we get a seemingly border triangle icon.

Step by step

1. First define a relative positioning of the box div:

<div class= "ToolTips" >

</div>

　　

Css:

. tooltips{

position:relative;

width:300px;

height:80px;

line-height:60px;

Background: #D7E7FC;

border-radius:4px;

}

Effect:

2. Next, using the knowledge of the post, we add a triangular icon to the div box:

<div class= "ToolTips" >

<div class= "Arrow" ></div>

 

</div>

　　

Triangle Icon CSS:

. arrow{

Position:absolute;

Color: #D7E7FC;

width:0px;

height:0px;

line-height:0px;

border-width:20px 15px 0;

Border-style:solid dashed dashed dashed;

Border-left-color:transparent;

Border-right-color:transparent;

Bottom: -20px;

right:50%;

}

Effect:

Initial prototype, can even be used directly, but if ToolTip background color and target background color overlap, then I am very difficult to distinguish, so we need to define a border.

3. Add border

Css:

. tooltips{

position:relative;

width:300px;

height:80px;

line-height:60px;

Background: #D7E7FC;

border:1px solid #A5C4EC;

border-radius:4px;

}

Effect:

The box has a border effect, but the small triangle below has not been "protected", which is simply intolerable for Virgo!

4. To "small triangle put on elastic band"

Before explaining the principle we have said that we need to use two triangles overlay, first we define two triangle Div, a background color and box border color is the same, a background color and box background color is the same:

<div class= "ToolTips" >

<div class= "Arrow arrow-border" ></div>

<div class= "Arrow arrow-bg" ></div>

 

</div>

　　

CSS is defined as follows:

. arrow{

Position:absolute;

width:0px;

height:0px;

line-height:0px;

border-width:20px 15px 0;

Border-style:solid dashed dashed dashed;

Border-left-color:transparent;

Border-right-color:transparent;

}

. arrow-border{

Color: #A5C4EC;

Bottom: -20px;

right:50%;

}

. arrow-bg{

Color: #D7E7FC;

Bottom: -19px;

right:50%;

}

Note: The bottom position of the. ARROW-BG and. Arrow-border is 1px (adjustable according to the border width) The order of the two div cannot be reversed.

Let's take a look at the final effect: