您现在的位置是：网站首页> 编程资料编程资料

怎么用纯CSS制作带小三角的tooltip提示框 div+css样式自制带小三角的tooltips效果CSS3 函数技巧用css 实现js实现的事情(clac Counters Tooltip)纯CSS3实现自定义Tooltip边框涂鸦风格的教程用简单的jquery+CSS创建自定义的a标签title提示tooltip关于CSS Tooltips(鼠标经过时显示)的效果纯css实现漂亮又健壮的tooltip的方法

2021-09-07 635人已围观

简介有很多新手朋友不知道如何使用css制作带小三角的tooltip提示框，本人研究整理了一下，晒出来和大家分享，希望可以帮助你们

首先附上效果图：

以上的效果完全是用 css 来实现的，那么是怎么实现的呢？

我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。

通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。

复制代码

代码如下:

字符制作三角边框

◆
◆

◆
◆

PS：除了用字符可以实现三角，我们还可以利用 border 来实现三角。