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实现带箭头的提示框