Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.-HTML Tutorial-php.cn

Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.

PHPz

Jun 24, 2016 am 11:52 AM

This video introduces how to create tooltip-like tooltip boxes and arrow shapes using only CSS!

First introduce CSS: after selector

Definition and usage: (Refer to w3school:after selector)

: The after selector is inserted after the content of the selected element Content, use the content attribute to specify the content to be inserted

Example:

p:after
{
content:"台词：-";
background-color:yellow;
color:red;
font-weight:bold;
}

Let’s introduce the use of: after selector to create CSS arrows and other prompt boxes: (Here will be a simple step by step The design added in each step is the extra style code content in the previous step. Pay attention to the difference! )

First, our HTML code:

<body>
<div class="demo">
</div>
</body>

Let’s set this Box style:

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}</style>

Screenshot:

Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.

It should be noted here that we set the position attribute to relative to allow us to set our "arrow" (Not yet) Absolutely position it and keep it connected to our box!

Then we continue to insert the "arrow" (not yet appeared) basic style:

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
height:20px;
width:20px;
background:yellow;
}</style>

Screenshot:

Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.

You will Notice a few things, first, we only inserted a yellow square, that is the square we will design as an arrow; second, we set absolute positioning so that we can move it to the position we want!

Continue, set a border for the yellow square (the predecessor of "arrow"). The border here is the entity of the arrow, and remove the content of the yellow square (by setting the style "height:0" in demo:after ;width:0" to remove the yellow square, here we omit the height and width of the yellow square):

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
//height:20px;
//width:20px;
background:yellow;
border:10px solid gray;
}</style>

Screenshot:

Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.

Now add The gray border square is designed in the form of an arrow:

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
//height:20px;
//width:20px;
//background:yellow;
//border:10px solid gray;
border:10px solid transparent;
border-top-color:gray    }
</style>

Screenshot:

Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.

OK! We can see the arrow taking shape!

Let’s set its position as we want (in this case the arrow moves to the lower end):

<style>
.demo{
background-color: lightgreen;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
//height:20px;
//width:20px;
//background:yellow;
//border:10px solid gray;
border:10px solid transparent;
border-top-color:gray;
top:100%;
left:10px;
}</style>

Screenshot:

Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.

This is basically done

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

<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after{
content:&#39;&#39;;
position:absolute;
//height:20px;
//width:20px;
//background:yellow;
//border:10px solid gray;
border:10px solid transparent;
border-top-color:gray;
top:100%;
left:10px;
}</style>

Screenshot:

Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.

You can set the specific style you need! For example, to move the arrow to the other three sides, you can set border-TRBL-color:gray; and TRBL (TRBL refers to toprightbottomleft)!

Of course, when you want to modify the position of the arrow on the box border, you also need to pay attention: the size of the border is not included in the size of the box itself! Therefore, you need to pay attention to the influence of margin when designing. For example, if the arrow is centered in the lower border, we consider the above and also need to add: "margin-left:-10px;" to be centered!

The conclusion comes from the comments of yy Duckweed Life (concise image~~haha~~):

The design principle of this example: Set the width and height of the pseudo-class selector box to 0, over there The area formed by the border looks like [X], and the other three sides are transparent, so a triangle is displayed!

Source of this article: https://www.cnblogs.com/xuyongsky1234/p/4152853.html

Statement

This article is reproduced at:cnblogs. If there is any infringement, please contact admin@php.cn delete

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

See all articles