用css的border属性实现tip三角
来源:互联网 发布:python 优点 编辑:程序博客网 时间:2024/05/16 02:13
先看看应用实例吧:
实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如
01
.box{
02
03
width
:
0px
;
04
05
height
:
0
;
06
07
border-bottom
:
50px
#F00
solid
;
08
09
border-left
:
50px
#03F
solid
;
10
11
border-right
:
50px
#F90
solid
;
12
13
border-top
:
50px
#6C0
solid
;
14
15
}
在浏览器中的显示如图:
点击查看demo:http://www.css88.com/demo/border/border1.html
这样就有上下左右四个三角形了,再把除了要用的三角外的其他3个三角(border)颜色设置为背景色就ok了。
例如这样就能得到一个颜色为#CCC的向上的三角:
01
.to-
top
{
02
03
display
:
block
;
04
05
overflow
:
hidden
;
06
07
width
:
0px
;
08
09
height
:
0px
;
10
11
border
:
6px
solid
#ccc
;
12
13
border-color
:
#ccc
#fff
;
14
15
border-width
:
0
6px
6px
6px
;
16
17
}
更多的实例请点击查看demo:http://www.css88.com/demo/border/border.html