Xin Xing and you hand-written CSS bubbles, and Xin Xing css bubbles together

Xin Xing and you hand-written CSS bubbles, and Xin Xing css bubbles together

In the previous article, I published a blog with a hand-written navigation bar, so I will write bubbles with you. What is bubble? First, let's take a look at the first child shoes to better understand what is a bubble:

This is a simple bubble, so what is it mainly used? It can be used to display it when we click a text segment. Of course, this may require Javascript knowledge. We will not mention it first, here we will show you how to create a CSS bubble.

Let's analyze the idea first. Its implementation is nothing more than a rectangle border, and then a triangle below, but this triangle is a hollow, that is, a hollow triangle, and it is still a triangle with only two sides, so let's first look at how to make this triangle. In fact, it is quite simple to implement this triangle. I will first give the code and then give an explanation:

When we run the above Code, we find that there is only one red inverted triangle, as shown below:


How is it implemented? First, we created a div and set its id to demo. Then, we set its width and height to 0 in css and set the border to 75 pixels, this is very important, that is, we can't see its content, we only see its border, and its four borders are in red color, but it is in, its bottom border and left and right border are transparent, so we can only see the top border, that is, we can only see one inverted triangle, not the entire rectangular area, this is the implementation principle of this triangle. If you want to make a right triangle, you can write it yourself and try it.


Step 1: Write A my.html file with the following content:

<! DOCTYPE html> Step 2: we create a new xing.css file and start our css editing work. We need to implement this triangle in em and then use span to hollow it out. Therefore, our tag is used to display the text, we use the following arrow to implement arrows. We first write the tag style:


.tag{ width:300px; height:100px; border:5px solid #09F; position: relative; background-color:#FFF;}
Step 3: We start to write down the arrow above, and we need to use the em label. before writing, there is a question: what should we do with its layout? Here we adopt the absolute layout, if you are not sure about the absolute layout, you can refer to the previous tutorial and explain it. The arrow above also explains how to implement this function. If you are not clear about it, You can repeat the code and try it several times. The added code is as follows:


.tag{ width:300px; height:100px; border:5px solid #09F;  background-color:#FFF;}.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;}
Step 4: some shoes may feel faulty. After refreshing the interface, the drop-down arrow is not implemented. Why? This means that if we use absolute layout in a child element, if the parent element does not specify the layout mode, the child element will be located relative to the body, 40 pixels under the body, of course, nothing can be seen, so we change the code in the tag as follows, that is, add its location attribute. The changed code is as follows:


.tag{ width:300px; height:100px; border:5px solid #09F; position: relative; background-color:#FFF;}.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;}
At this point, let's take a look at the effect:



In fact, this is already a bubble. If the reader's requirements are not high, you can close the work now.
Step 5: Further modification is actually very simple at this time. The following span is almost a copy of the above em tag, we only need to make the downward arrow of this element a white triangle, so the added code is as follows:

.tag{ width:300px; height:100px; border:5px solid #09F; position: relative; background-color:#FFF;}.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid ; border-color:#09F transparent transparent;}.tag span{display:block; border-width:20px; position:absolute; bottom:-33px; left:100px; border-style:solid ; border-color:#FFF transparent transparent;}
Well, let's take a look at the effect:





Well, This completes the effect of handwriting bubbles with pure CSS. If you have any questions, please leave a message below. I will check and reply carefully. Thank you.