Css绘制箭头实现代码

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

具体的做法是对一个矩形，设置border，并将width和height设置为0，即可模拟出箭头形状（三角形）。如下图所示绘制了一个矩形，并将矩形的width和height设置为0，border设置为100px

相关CSS:

复制代码

代码如下:

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

上面的其实就是四个矩形，分别是上下左右四个方向，如果我们想要某一个方向的矩形，就可以将它相邻两侧的border-color设置为transparent,对侧不设置border

第一个箭头的CSS，其余的类似

复制代码

代码如下:

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

狼蚁网站SEO优化是一个箭头的Demo
PS: 2012-6-1
IE6不支持transparent，上面的代码在IE6加一点处理透明的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;

上一篇：CSS quiz 带边 border 的三角形下一篇：背景半透明最佳实践

Css绘制箭头实现代码

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

Css绘制箭头实现代码

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设