纯CSS实现带小三角提示框

要实现在页面上点击指定元素时，弹出一个信息提示框。在前面的文章中，我们已经简单介绍了如何使用纯 CSS 创建一个三角形。本文在此基础上，记录如何使用 CSS 创建带三角形的提示框。

实现的原理是创建一个div提示框，然后再创建一个三角形，将三角形用绝对定位（absolute）到提示框对应的位置。

一、创建不带边框的提示框：

之前已介绍过怎么生成三角形，直接代码如下：

<style>body {margin: 0;padding: 0;background: grey;}/*提示框容器*/.tip {position: relative;margin-left: 20px;margin-top: 20px;width: 200px;background: #fff;padding: 10px;/*设置圆角*/-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}/*提示框-左三角*/.tip-trangle-left {position: absolute;bottom: 15px;left: -10px;width: 0;height: 0;border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-right: 15px solid #fff;}/*提示框-右三角*/.tip-trangle-right {position: absolute;top: 15px;right: -10px;width: 0;height: 0;border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-left: 15px solid #fff;}/*提示框-上三角*/.tip-trangle-top {position: absolute;top: -10px;left: 20px;width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid #fff;}/*提示框-下三角*/.tip-trangle-bottom {position: absolute;bottom: -10px;left: 20px;width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 15px solid #fff;}
</style>
<div class="tip"><div class="tip-trangle-left"></div>我是提示框<br/>内容可以自定义
</div>
<div class="tip"><div class="tip-trangle-right"></div>我是提示框<br/>内容可以自定义
</div>
<div class="tip"><div class="tip-trangle-top"></div>我是提示框<br/>内容可以自定义
</div>
<div class="tip"><div class="tip-trangle-bottom"></div>我是提示框<br/>内容可以自定义
</div>

以上代码效果如下（我们实现了箭头在4个不同方向的提示框，在使用时可根据自身需要进行调整）:

二、创建带边框的提示框：

第一步实现了不带边框的提示框，如果要实现带边框的提示框，原理是先把提示框容器加上边框，然后通过伪元素，在需要带箭头的边框上面生成2个三角形，最后改变最上面的三角形的颜色（和提示框的内容背景色相同），即可实现。代码如下：

<style>body {margin: 0;padding: 0;background: grey;}/*提示框容器-上三角形*/.tip-top {margin: 20px;padding: 5px;width: 300px;height: 60px;border: 2px solid #f99;position: relative;background-color: #FFF;/*设置圆角*/-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}/*生成2个叠加的三角形*/.tip-top:before, .tip-top:after {content: "";display: block;border-width: 15px;position: absolute;top: -30px;left: 100px;border-style: solid dashed dashed solid;border-color: transparent transparent #f99 transparent;font-size: 0;line-height: 0;}/*将上面的三角形颜色设置和容器背景色相同*/.tip-top:after {top: -27px;border-color: transparent transparent #FFF transparent;}/*下三角*/.tip-bottom {margin: 20px;padding: 5px;width: 300px;height: 60px;border: 2px solid #f99;position: relative;background-color: #0FF;/*设置圆角*/-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.tip-bottom:before, .tip-bottom:after {content: "";display: block;border-width: 15px;position: absolute;bottom: -30px;left: 100px;border-style: solid dashed dashed solid;border-color: #f99 transparent transparent transparent;font-size: 0;line-height: 0;}.tip-bottom:after {bottom: -27px;border-color: #0FF transparent transparent transparent;}/*左三角*/.tip-left {margin: 20px;padding: 5px;width: 300px;height: 60px;border: 2px solid #f99;position: relative;background-color: #FFF;/*设置圆角*/-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.tip-left:before, .tip-left:after {content: "";display: block;border-width: 15px;position: absolute;left: -30px;top: 20px;border-style: dashed solid solid dashed;border-color: transparent #f99 transparent transparent;font-size: 0;line-height: 0;}.tip-left:after {left: -27px;border-color: transparent #FFF transparent transparent;}/*右三角*/.tip-right {margin: 20px;padding: 5px;width: 300px;height: 60px;border: 2px solid #f99;position: relative;background-color: #FFF;/*设置圆角*/-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.tip-right:before, .tip-right:after {content: "";display: block;border-width: 15px;position: absolute;right: -30px;top: 20px;border-style: dashed solid solid dashed;border-color: transparent transparent transparent #f99;font-size: 0;line-height: 0;}.tip-right:after {right: -27px;border-color: transparent transparent transparent #FFF;}
</style>
<div class="tip-top">我是提示框<br/>内容可以自定义
</div>
<div class="tip-bottom">我是提示框<br/>内容可以自定义
</div>
<div class="tip-left">我是提示框<br/>内容可以自定义
</div>
<div class="tip-right">我是提示框<br/>内容可以自定义
</div>
</body>

以上代码效果如下（我们实现了箭头在4个不同方向的提示框，在使用时可根据自身需要进行调整）:

通过以上两个例子，展示了如何生成简单的提示框。而对于有边框的提示框，如果边框颜色和内容区背景色相同，也会实现无边框的提示框效果。在使用时，可以根据自己需要，调整代码。

纯CSS实现带小三角提示框相关推荐

使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框
在网页中我们经常会用到模态框,一般会用于显示表单或者是提示信息.由于模态框涉及到页面上比较多的交互效果,最简单的交互就是打开以及关闭两个操作,而关闭又会涉及是否需要在打开状态下点击模态框外部能够关闭这 ...
Echarts tooltip 自定义 css 样式带小三角的背景样式
var geoCoordMap = { '上海': [121.4648,31.2891], '东莞': [113.8953,22.901], '东营': [118.7073,3 ...
html圆形按钮和箭头同时变色,JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
CSS带箭头的提示框实现
Abstract 在使用markdown编辑器写博客的时候,发现了这个提示框很好看,如下图: 图一:带箭头提示框图图二:普通提示框下面就来依次实现一下. 2. Related Da ...
css实现三角提示框
一.创建不带边框的提示框: 之前已介绍过怎么生成三角形,直接代码如下: <style> body { margin: 0; padding: 0; ...
Qt如何绘制带小三角的消息框
一.简述本篇文章讲述的是如何绘制出一个带小三角的窗口,请看下图,说白了就是绘制一个Rect + Triangle ,然后添加外部阴影效果. 二.代码之路 ArrowWidget.h #ifndef ...
html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...

纯CSS实现带小三角提示框

纯CSS实现带小三角提示框相关推荐

最新文章

热门文章