Abstract

    在使用markdown编辑器写博客的时候，发现了这个提示框很好看，如下图：

图一：带箭头提示框图

图二：普通提示框

    下面就来依次实现一下。

2. Related Data

    在参考一的文章中介绍了CSS实现带箭头的提示框[1]。箭头的设计在这里其实有三种可行方案：

考虑使用图片作为顶部的三角的背景；考虑使用SVG来绘制顶部的三角图形；纯粹的依靠CSS的border属性来设置，无疑是很好的一种方式；

因为，自己之前也没有接触过使用border-color来指定颜色，故而这里来记录一下。

3. Experiment

先定义结构：

<div class="info-type-one"><!-- 内容区域 --><div class="">测试内容！</div><!-- 显示提示区域 内容 --><div class="info-panel-content"><!-- 显示提示框区域 三角区域 --><div class="info-panel-triple"></div>你好！</div></div>

然后定义样式：

<style type="text/css">.info-type-one{width: 120px;height: 30px;border: 1px solid #EEE;margin: 0 auto;text-align: center;line-height: 30px;}.info-panel-triple{width: 0;height: 0;border: 8px solid transparent;border-bottom-color: hsla(0,0%,6%,.6);position: absolute;left: 16px;top: -16px;}.info-panel-content{display: inline-block;position: relative;margin-top: 15px;height: 30px;line-height: 30px;background-color: hsla(0,0%,6%,.6);color: #FFF;text-align: left;padding-left: 15px;padding-right: 12px;border-radius: 3px;font-size: 0.8rem;letter-spacing: 0.1rem;}</style>

很容易就可以看见表现：

当然，我们也可以用js代码来封装一下，以简化调用。

封装：

首先还是微调一下CSS的样式代码：

.info-panel-type-one{position: absolute;}.info-panel-triple{width: 0;height: 0;border: 8px solid transparent;border-bottom-color: hsla(0,0%,6%,.6);position: absolute;left: 16px;top: -16px;}.info-panel-content{display: inline-block;position: relative;margin-top: 15px;height: 30px;line-height: 30px;background-color: hsla(0,0%,6%,.6);color: #FFF;text-align: left;padding-left: 15px;padding-right: 12px;border-radius: 3px;font-size: 0.8rem;letter-spacing: 0.1rem;user-select: none;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;cursor: pointer;}

然后编写对应的js代码：

/*** 创建提示框的第一种类型* @param {Object} parent 父控件* @param {Object} content 提示内容*/function create_info_panel_type_one(parent, content){var info_panel = document.createElement('div');info_panel.className = 'info-panel-type-one';var conent_panel = document.createElement('div');conent_panel.className = 'info-panel-content';var triple_panel = document.createElement('div');triple_panel.className = 'info-panel-triple';conent_panel.innerText = content;conent_panel.appendChild(triple_panel);info_panel.appendChild(conent_panel);parent.append(info_panel);}

测试：

页面代码：

<div class="hello" style="width: 200px;margin: 80px auto;">这里是测试的块1。</div><div class="hello" style="width: 200px;margin: 80px auto;">这里是测试的块2。</div><script type="text/javascript">// 调用var info_list = ["Hello world!", 'Tom']var info_panel_type_one_list = document.getElementsByClassName('hello');for(var i=0;i<info_panel_type_one_list.length;i++){// 处理一下闭包(function (i){var item = info_panel_type_one_list[i];create_info_panel_type_one(item, info_list[i]);})(i);}</script>

就可以很容易看见效果：

至于第二个那个比较简单的提示，这里就不写了。嘿嘿。

参考文章：

[1] CSS实现带箭头的提示框