在线笔记 favinavi - 人性化网络收藏夹

纯CSS3做一个带箭头指向的漂亮的带阴影提示框

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-05-29 15:01(UTC)

纯CSS3，不使用图片。先看下最终实现的效果图：

这里以指向右侧的尖形小箭头为例，其它方向请自行修改。

CSS复制代码

.helper{
padding:16px;right:100px;top:200px;border-radius:4px;min-width:80px;
position:fixed;z-index:10;background:#333;color:#fff;
box-shadow:2px 2px 6px 4px rgb(0 0 0 / 34%)
}
.helper-arrow{
width:12px;height:12px;right:-6px;top:calc(50% - 6px);display:block;position:absolute;
background:#f00;transform:rotate(45deg);
box-shadow:2px 2px 6px 4px rgb(0 0 0 / 34%)
}

其中，小箭头部分其实是使用了一个小正方形旋转45°实现的（transform:rotate(45deg);），演示时为了表现的更清楚，特意使用红色突出显示。

实际使用时，把小方块背景色改成和helper一致的背景色即可。

html复制代码

<div class='helper'>
	<div class='helper-arrow'></div>
	<h3>提示/帮助用</h3>
</div>

2050

favinavi - 重度网络用户必备在线笔记

使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题
当使用基于Cookie-Free域名加载CSS时，字体文件无法加载的问题通常是因为浏览器政策所导致的。这个问题与字体文件资源和浏览器的同源策略有关。在Web...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...
一个纯CSS的最小干扰的渐变色彩虹loading bar
Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。现在流...
php/javascript的一些关于时间处理的函数
记录一些经常用到的时间处理函数以备用。
简洁有效地实现水平垂直双居中
同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。具体实现的css代码如下：
Comparing the mobile adaptability of several Chinese web favorites
In the era of mobile phones, a website is still good to use, and whether you can...