Css绘图箭头完成编码

2021-03-11 18:24 jianzhan

实际的做法是对1个矩形框,设定border,并将width和height设定为0,便可仿真模拟出箭头样子(3角形)。 以下图所示绘图了1个矩形框,并将矩形框的width和height设定为0,border设定为100px:

有关CSS:

拷贝编码
编码以下:

border-left:100px solid #F00;
border-right:100px solid #F00;
border-top:100px solid #00F;
border-bottom:100px solid #00F;
width:0;
height:0;

上面的实际上便是4个矩形框,各自是左右上下4个方位,假如大家要想某1个方位的矩形框,便可以将它邻近两边的border-color设定为transparent,对侧不设定border

第1个箭头的CSS,其余的相近:

拷贝编码
编码以下:

border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid #00F;
width:0;
height:0;

下面是1个箭头的Demo:
PS: 2012⑹⑴
IE6不适用transparent,因而上面的编码在IE6加1点解决全透明的hack,改动后的编码以下

拷贝编码
编码以下:

border-left:100px solid transparent; border-right:100px solid transparent; _border-left:100px solid black; _filter:chroma(color=black); _border-right:100px solid black; _filter:chroma(color=black); border-bottom:100px solid #00F; width:0; height:0;