纯CSS 编写三角形箭头提示

最新推荐文章于 2024-03-05 10:54:19 发布

蝴蝶教程

最新推荐文章于 2024-03-05 10:54:19 发布

阅读量171

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/web_hxx/article/details/102598489

版权

CSS3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

要创建应从工具提示的特定一侧显示的箭头，请在工具提示后添加“空”内容，并将伪元素类::after与content属性一起添加。箭头本身是使用边框创建的。这将使工具提示看起来像一个讲话泡泡。此示例演示如何将箭头添加到工具提示的底部：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>教程（jc2182.com）</title>
<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>顶部工具提示 - 底部箭头</h2>

<div class="tooltip">鼠标悬停在这里
    <span class="tooltiptext">工具提示文本</span>
</div>

</body>
</html>

、

将箭头放在工具提示内：top: 100%将箭头放在工具提示的底部。left: 50%将箭头居中。
注意：border-width属性指定箭头的大小。如果更改margin-left值，也请将值更改为相同值。这将使箭头保持居中。border-color用于将内容转换成一个箭头。我们将顶部边框设置为黑色，其余部分设置为透明。如果所有的边都是黑色的，你最终会得到一个黑色方框。此示例演示如何将箭头添加到工具提示的顶部。请注意，我们这次设置了底部边框颜色：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>教程（jc2182.com）</title>
<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>底部工具提示 - 顶部箭头</h2>

<div class="tooltip">鼠标悬停在这里
    <span class="tooltiptext">工具提示文本</span>
</div>

</body>
</html>

有关左右三角形箭头提示

蝴蝶教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS 编写三角形箭头提示

要创建应从工具提示的特定一侧显示的箭头，请在工具提示后添加“空”内容，并将伪元素类::after与content属性一起添加。箭头本身是使用边框创建的。这将使工具提示看起来像一个讲话泡泡。此示例演示如何将箭头添加到工具提示的底部：<!DOCTYPE html><html><meta charset="utf-8"><title>教程（jc...
复制链接

扫一扫