欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

纯css制作带三角border篇(兼容所有浏览器)

美国ST机房 添加于 2013-08-26  
CSS教程

以前写过一篇纯CSS制作带三角的边框,那篇文章是用HTML特殊字符来制作三角的,今天介绍下,如何用 border 来制作三角
html 代码如下:

<div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div>

css 代码如下:

.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
_border-left: 5px solid white;
_border-right: 5px solid white;
border-bottom: 5px solid black;
overflow:hidden;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
_border-left: 20px solid white;
_border-right: 20px solid white;
border-top: 20px solid #f00;
overflow:hidden;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
_border-top: 60px solid white;
_border-bottom: 60px solid white;
border-left: 60px solid green;
overflow:hidden;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
_border-top: 10px solid white;
_border-bottom: 10px solid white;
border-right:10px solid blue;
overflow:hidden;
}

效果图如下:

纯css制作带三角border篇(兼容所有浏览器)-图片1
纯css制作带三角border篇(兼容所有浏览器)-图片1

测试浏览器:chrome,firefox,ie8,ie7,ie6,safari,opera
PS:
1、原文并没有兼容 ie6 浏览器,所以我改了下,现在的版本已经可以兼容所有浏览器了。
2、相对于用 border 来做三角,我更加喜欢用 html 特殊字符来制作三角。

零度科技原文链接:http://www.ldisp.com/a/css/2013/1793.shtml

上一篇:用CSS代码绘制三角形 纯CSS绘制三角形的代码
下一篇:css 字体字符间距设置

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理