纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE!

关注

转载最新推荐文章于 2026-08-01 08:30:17 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

解决VS Code 配置Code Runner运行Scheme时报错做SCIP习题的时候需要动手写一点Scheme代码，于是下了个Chez Scheme，参考了一篇在Windows 10下部署Scheme开发环境在VS Code上配置运行环境。环境变量明明配好了（见下图1），配置文件里也把（见图2）后缀为.ss和.scm的文件都关联到scheme了，图1图2跑起来却冒出了个csi，网上查也查不到csi是个什么东西以及为什么Code Runner会调用csi... 阅读详情

互联网拥有很多免费的工具和应用，几乎可以帮助你实现任何你需要的UI组件和设计，大家还记得上周我们介绍的纯CSS实现的气泡式提示文章吗？今天我们将介绍一个在线的生成气泡式提示的web工具 - CSS ARROW PLEASE，希望大家喜欢！

主要特性

设置气泡提示位置（上下左右）
提示尺寸大小
文字颜色
边框大小和尺寸
边框颜色
自动生成css代码

生成代码

.arrow_box {
    position: relative;
    background: #202020; 
    border: 4px solid # ccc;
}
.arrow_box: after, .arrow_box: before {
    top: 100 % ;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer - events: none;
}
.arrow_box: after {
    border - top - color: #202020; 
    border-width: 30px; 
    left: 50%; 
    margin-left: -30px; 
}
 .arrow_box:before { 
    border-top-color: # ccc;
    border - width: 36px;
    left: 50 % ;
    margin-left: -36px;
}