纯CSS实现tooltip提示框,CSS箭头及形状
2014-12-09 15:56
826 查看
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状!
首先介绍一下CSS:after选择器
定义和用法:(参考w3school:after选择器)
:after选择器在被选元素的内容后面插入内容,使用content属性来指定要插入的内容
例:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View Code
具体大家可以参考:w3school!
下面来介绍用:after选择器来制作CSS箭头等提示框:(这里将一步一步简单的设计,每一步添加的内容就是与前一步多出来的style代码内容,注意区别!)
首先,我们的HTML代码:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View Code
让我们来设置该盒子的样式:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091053010256685.jpg)
这里需注意我们设置position属性为relative,是为了允许我们设置我们的“箭头”(还没有出现)绝对定位并且保持它和我们的盒子有联系!
接着我们继续插入“箭头”(还没有出现)基本样式:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091110098842264.jpg)
你将会注意到一些事,一、我们仅仅插入了一个黄色的方块,那个就是我们将要设计成箭头的方块;二、我们设置绝对定位absolute以至于我们可以将它移动到我们想要的位置上!
继续,这儿给黄色方块(即“箭头”前身)设置边框,这儿的边框就是箭头的实体,并且去掉黄色方块的内容(通过设置.demo:after中的样式“height:0;width:0”去掉黄色方块,这里我们省略了黄色方块的height、width):
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091113328537854.jpg)
现在再将灰色边框方块设计成箭头形式:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091118137433975.jpg)
OK!我们可以看到箭头成形!
下面来设置它的位置为我们想要的(此例箭头移动至下端):
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091125556348931.jpg)
到这里基本上完事了
下面整体样式设计下(其实就更改了盒子的背景色与箭头颜色相同):
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091129116035727.jpg)
具体需要什么样的样式可以自行设置了!例如将箭头移动到其他三边可以设置border-T\R\B\L-color:gray;和TRBL(TRBL是指top\right\bottom\left)即可!
当然要修改箭头在盒子边框上的位置时,还需注意:边框border的大小不包含在自身盒子尺寸内!所以设计时需要注意margin的影响,比如箭头在下边框中居中,我们考虑上面的同时还需添加:“ margin-left:-10px; ”才可居中!
结论来自yy浮萍人生的评论(简洁形象~~哈哈~~):
此例设计原理:设置伪类选择器盒子的宽度和高度为0,那边border形成的区域是[X]这个样子的,其他三边透明了,所以呢就显示了个三角形!
(本文参考:YUI Team:CSS Quick Tip: CSS Arrows and Shapes Without Markup)
首先介绍一下CSS:after选择器
定义和用法:(参考w3school:after选择器)
:after选择器在被选元素的内容后面插入内容,使用content属性来指定要插入的内容
例:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
p:after { content:"台词:-"; background-color:yellow; color:red; font-weight:bold; }
View Code
具体大家可以参考:w3school!
下面来介绍用:after选择器来制作CSS箭头等提示框:(这里将一步一步简单的设计,每一步添加的内容就是与前一步多出来的style代码内容,注意区别!)
首先,我们的HTML代码:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<body> <div class="demo"></div> </body>
View Code
让我们来设置该盒子的样式:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } </style>
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091053010256685.jpg)
这里需注意我们设置position属性为relative,是为了允许我们设置我们的“箭头”(还没有出现)绝对定位并且保持它和我们的盒子有联系!
接着我们继续插入“箭头”(还没有出现)基本样式:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; height:20px; width:20px; background:yellow; } </style>
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091110098842264.jpg)
你将会注意到一些事,一、我们仅仅插入了一个黄色的方块,那个就是我们将要设计成箭头的方块;二、我们设置绝对定位absolute以至于我们可以将它移动到我们想要的位置上!
继续,这儿给黄色方块(即“箭头”前身)设置边框,这儿的边框就是箭头的实体,并且去掉黄色方块的内容(通过设置.demo:after中的样式“height:0;width:0”去掉黄色方块,这里我们省略了黄色方块的height、width):
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; //height:20px; //width:20px; background:yellow; border:10px solid gray; } </style>
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091113328537854.jpg)
现在再将灰色边框方块设计成箭头形式:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; //height:20px; //width:20px; //background:yellow; //border:10px solid gray; border:10px solid transparent; border-top-color:gray } </style>
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091118137433975.jpg)
OK!我们可以看到箭头成形!
下面来设置它的位置为我们想要的(此例箭头移动至下端):
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<style> .demo{ background-color: lightgreen; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; //height:20px; //width:20px; //background:yellow; //border:10px solid gray; border:10px solid transparent; border-top-color:gray; top:100%; left:10px; } </style>
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091125556348931.jpg)
到这里基本上完事了
下面整体样式设计下(其实就更改了盒子的背景色与箭头颜色相同):
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } .demo:after{ content:''; position:absolute; //height:20px; //width:20px; //background:yellow; //border:10px solid gray; border:10px solid transparent; border-top-color:gray; top:100%; left:10px; } </style>
View Code
截图:
![](http://images.cnitblog.com/blog/695189/201412/091129116035727.jpg)
具体需要什么样的样式可以自行设置了!例如将箭头移动到其他三边可以设置border-T\R\B\L-color:gray;和TRBL(TRBL是指top\right\bottom\left)即可!
当然要修改箭头在盒子边框上的位置时,还需注意:边框border的大小不包含在自身盒子尺寸内!所以设计时需要注意margin的影响,比如箭头在下边框中居中,我们考虑上面的同时还需添加:“ margin-left:-10px; ”才可居中!
结论来自yy浮萍人生的评论(简洁形象~~哈哈~~):
此例设计原理:设置伪类选择器盒子的宽度和高度为0,那边border形成的区域是[X]这个样子的,其他三边透明了,所以呢就显示了个三角形!
(本文参考:YUI Team:CSS Quick Tip: CSS Arrows and Shapes Without Markup)
相关文章推荐
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
- 纯CSS实现tooltip提示框,CSS箭头及形状
- 纯CSS实现tooltip提示框,CSS箭头及形状
- css 提示框 CSS实现带箭头的DIV提示框
- 纯CSS实现箭头、气泡让提示功能具有三角形图标
- CSS实现带箭头的DIV(鼠标放上显示提示框)
- 用 css 实现提示框的箭头
- css实现对话框-带箭头提示框
- 纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)
- div+css实现带三角箭头提示框
- 使用css实现全兼容tooltip提示框
- 纯CSS 实现tooltip 内容提示信息效果
- div+css实现圆形div以及带箭头提示框效果
- CSS实现带箭头的提示框及鼠标在按钮与提示框上提示框不隐藏的Javascript的实现
- 纯CSS实现箭头、气泡让提示功能具有三角形图标
- div+css实现带三角箭头提示框
- div+css实现带三角箭头提示框
- CSS纯样式实现箭头、对话框等形状
- 纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层
- 纯CSS实现“三角形箭头”布局的代码