CSS带箭头的提示框实现

Abstract

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

• 图一：带箭头提示框图
  
• 图二：普通提示框
  
      下面就来依次实现一下。

2. Related Data

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

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

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

3. Experiment

先定义结构：

	
	

		测试内容！
	
	
	

		
		

		你好！
	

然后定义样式：

很容易就可以看见表现：

当然，我们也可以用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实现带箭头的提示框