CSS Arrow

2025年3月26日 | 阅读 3 分钟

CSS 箭头用于在工具提示旁边添加箭头。它使工具提示看起来像一个语音气泡。它也可以表示为四种方式

顶部箭头
底部箭头
左侧箭头
右侧箭头

CSS 顶部箭头

当您将鼠标光标移到元素上时，顶部箭头用于在工具提示的顶部添加一个像箭头一样的结构。它会在元素的底部显示工具提示。

请看这个例子

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Arrow Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Welcom to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>

CSS 底部箭头

当您将鼠标光标移到元素上时，底部箭头用于在工具提示的底部添加一个像箭头一样的结构。它会在元素的顶部显示工具提示。

请看这个例子

 <!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Arrow Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Welcom to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>

CSS 左侧箭头

当您将鼠标光标移到元素上时，左侧箭头用于在工具提示的左侧添加一个像箭头一样的结构。它会在元素的右侧显示工具提示。

请看这个例子

 <!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Arrow Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Welcom to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>

CSS 右侧箭头

当您将鼠标光标移到元素上时，右侧箭头用于在工具提示的右侧添加一个像箭头一样的结构。它会在元素的左侧显示工具提示。

请看这个例子

 <!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Arrow Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Welcom to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>

下一个主题CSS3 Flexbox

CSS Arrow

CSS 顶部箭头

CSS 底部箭头

CSS 左侧箭头

CSS 右侧箭头

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Arrow

CSS 顶部箭头

CSS 底部箭头

CSS 左侧箭头

CSS 右侧箭头

相关帖子

CSS z-index

flex-grow property

flex-flow property

CSS Gradient

CSS @Media Query

CSS Transition

CSS flex property

flex-shrink property

CSS masking

CSS units

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器