使用html+css实现三角标示符号
2014-11-17 15:45
513 查看
我们平常打开某个网站的时候,常常会发现网页上很多导航或者指示条会使用一个三角符号去指向内容,效果简洁美观,甚至很多前端面试中也会提及如何在网页上实现一个三角符号,这里给出一个很简单使用的实现方式。
首先看看哪些网站都使用了这种方式:
淘宝(注意到右边那个三角符号)
网易(导航条三角符号应用)
搜狐
这种例子多不胜数,此处不一一举例了。下面说如何实现:
实现方式实际上很简单,主要利用了伪元素和定位来完成:
代码如下:
这里首先定义一个div,给它加上一个class叫做div1,主要是用来给它自身定义背景,宽高,并且需要加上相对定位,因为它里面的三角符号需要在它的基础上进行绝对定位;
在这个div1 class上面加一个before或者after的伪元素,这个就是三角符号,主要利用了它的border属性,定义三个border,让border-left和border-right透明,让border-top(或border-bottom)非透明,取决于你想将这个三角符号设置成什么颜色。
最后需要给这个三角符号进行绝对定位,如果你要将它放在这个div的最下面,可以设置bottom:0,如果你要做一个导航类的三角让它在div顶部并指向某元素,可以采用负的top值进行实现,其为负的border的宽度,就可以让它和div连在一起。
同时,要设置这个伪元素宽高为0,内容为空,剩下的工作就是调整它的位置了,效果如下:
首先看看哪些网站都使用了这种方式:
淘宝(注意到右边那个三角符号)
网易(导航条三角符号应用)
搜狐
这种例子多不胜数,此处不一一举例了。下面说如何实现:
实现方式实际上很简单,主要利用了伪元素和定位来完成:
代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .div1{ background: red; width: 100px; height: 100px; position: relative; } .div1:after{ position: absolute; bottom: 0; width: 0; height: 0; left: 50%; margin-left: -10px; content: " "; border-bottom: 10px solid #000000 ; border-left: 10px solid transparent ; border-right: 10px solid transparent ; } .div1:before{ position: absolute; top: -10px; width: 0; height: 0; left: 50%; margin-left: -10px; content: " "; border-bottom: 10px solid #000000 ; border-left: 10px solid transparent ; border-right: 10px solid transparent ; } </style> </head> <body> <div class="div1"> () </div> </body> </html>
这里首先定义一个div,给它加上一个class叫做div1,主要是用来给它自身定义背景,宽高,并且需要加上相对定位,因为它里面的三角符号需要在它的基础上进行绝对定位;
在这个div1 class上面加一个before或者after的伪元素,这个就是三角符号,主要利用了它的border属性,定义三个border,让border-left和border-right透明,让border-top(或border-bottom)非透明,取决于你想将这个三角符号设置成什么颜色。
最后需要给这个三角符号进行绝对定位,如果你要将它放在这个div的最下面,可以设置bottom:0,如果你要做一个导航类的三角让它在div顶部并指向某元素,可以采用负的top值进行实现,其为负的border的宽度,就可以让它和div连在一起。
同时,要设置这个伪元素宽高为0,内容为空,剩下的工作就是调整它的位置了,效果如下:
相关文章推荐
- 使用css(border)边框实现倒三角
- 使用HTML + CSS实现圆圈背景下的数字
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- 使用html+css实现简单的箭头
- 使用简单的html+css+javacsript实现dialog功能
- 使用HTML+CSS实现鼠标划过的二级菜单栏
- CSS、HTMl使用position: fixed;实现div的高度填满剩余空间
- HTML使用DIV+css实现展开全文的功能
- 任务九:使用HTML/CSS实现一个复杂页面
- 【ife】任务九:使用HTML/CSS实现一个复杂页面
- HTML,使用div+css实现自适应table布局
- 使用html+css实现一个个人照片墙
- HTML 无序列表项目符号使用图片的CSS写法
- 使用HTML和CSS实现大白
- 前端使用html+css,表单型效果自我实现
- 使用HTML+css实现京东图片自动轮播效果(自己写的)
- html中div使用CSS实现水平/垂直居中的多种方式
- 使用HTML/CSS实现一个复杂页面--随笔
- 使用HTML+CSS实现如图布局,border-width:5px,格子大小是50px*50px,hover时 边框变成红色,需要考虑语义化。
- CSS基础篇--html 空格符号 nbsp; ensp; emsp; 介绍以及实现中文对齐的方法