CSS3制作toolTip框小三角

最新推荐文章于 2023-11-17 15:19:50 发布

PTKGEM

最新推荐文章于 2023-11-17 15:19:50 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Css / Html 文章标签： tooltip css制作小三角形

本文链接：https://blog.youkuaiyun.com/Dong_PT/article/details/51184603

Css / Html 专栏收录该内容

31 篇文章

订阅专栏

这篇博客介绍了如何利用CSS3的定位、伪元素和变形属性来制作tooltip提示框，并展示了实现代码。同时提到了小三角形效果可能存在的遮罩文本的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

这里写图片描述

实现代码：

HTML

<body>

    <div class="callout">请按正确格式填写</div>

</body>

CSS

.callout {
        position: relative;
        top: 5em;  /*单位em相对父元素字体大小 此处即<body> 16px*/
        width: 20em;
        height: 12.6em;
        background-color: #F8BCFF;
        border: 3px solid #000;
        text-align: center;
        line-height: 12.6em;
    }

.callout::before {
        content: "";
        position: absolute;
        top: -1.25em; 
        left: 1em;
        padding: 1em;
        background-color: inherit;
        border: inherit;
        border-right: 0;
        border-bottom: 0;
        transform: rotate(45deg);
    }