Div + CSS implement a prompt box with a triangular arrow

The prompt box with a triangular arrow is shown below:

This is a prompt box

We usually use images to implement the small triangle above, because it is convenient and fast, but if the image processing is not good, it will look like there are complex edges, thus affecting the vision, so we can solve it in another way.

First, we will study how CSS implements triangles.

Suppose there is a box (DIV) with 100 pixels for the fixed width and height respectively, and then 50 pixels for the border, it looks like the following (for a more intuitive, the border is given in four different colors ):

 

Next, set the height of the box to 0:

Set the width to 0:

This prototype has already come out. Due to the IE6 bug (div with a height of 0 will have a certain default height, and the measurement result on my computer is 19 pixels), we need to make some minor adjustments, add overflow: Den den to Div, and IE6 can be correctly parsed.

The next step is to remove the remaining three borders. Take the up arrow as an example. If you want to move the arrow up, you need to remove the color of the Three Borders: left, top, and right. A common method is to set the color of the Three Borders to transparent, that is, the transparent attribute.

 
Border-color: transparent #056f61
 

After setting, you can see the following results:

In this way, the triangle created by CSS is complete. It seems that the work can almost end here. You still need to test the compatibility of the browser. After testing, mainstream browsers support it, but when you open IE6, the result is miserable, it looks like this (T-T ):

Check which part of the problem has occurred and find that the original IE6 does not support the transparent attribute. How can this problem be solved? I have already done so much work before, so I cannot drop ie6.

So I checked the method that IE6 supports transparent on the Internet. The result is that a filter is required. However, this solution is definitely not feasible. If you want to use a filter, it is better to use images directly. Then I studied it again,

If you change the attribute of the other three edges from solid to dotted or dashed, you can:

/*Border-style: Solid*/Border-style: dotted solid; border-width: 50px; border-color: transparent #056f61;
 

In this way, IE6 will "support" the transparent attribute. Why? I have not understood this problem. After testing, we found that if we set the border type of the box to dashed, there will be a strange behavior in IE6:

When the width and height of the box are 100 pixels and the Border width is 34 pixels and the type is dashed, the border disappears and is displayed when it is set to 33 pixels, and the proportion is certain.

This may explain why IE6 displays "normal" when the border type is changed to dashed.

When the border type is dotted, IE6 is shown as follows:

When the width and height of the box are set to 0, the black spots disappear, and IE6 also shows "normal.

Although the parsing of IE6 may have problems, it finally "solved" the bug that it does not support transparent.

The next work is very simple. For example, to create a triangle, the background is consistent with the prompt box, and it is superimposed on the previous triangle, leaving only one pixel edge, and then positioning it on the prompt box.

You can create a triangle between the left and right sides and the bottom according to your needs.

These are my personal experiences. If you have any mistakes, please correct them.

Source code: prompt box with triangular arrows

------------------------------

Indicate the source for reprinting.