纯css制作带三角border篇(兼容所有浏览器)
发布时间：2013-03-28 16:15:53 作者：佚名 
我要评论
我要评论上一篇文章是用HTML特殊字符来制作三角的，今天介绍下，如何用 border 来制作三角，相对于用 border 来做三角，我更加喜欢用 html 特殊字符来制作三角，感兴趣的朋友可以参考下哈
以前写过一篇纯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;
}
效果图如下：
测试浏览器：chrome，firefox，ie8，ie7，ie6，safari，opera
PS：
1、原文并没有兼容 ie6 浏览器，所以我改了下，现在的版本已经可以兼容所有浏览器了。
2、相对于用 border 来做三角，我更加喜欢用 html 特殊字符来制作三角。
相关文章
- 下面的效果完全是用css 来实现的，那么是怎么实现的呢，我们知道 html 中有一些特殊的字符，通过特殊字符，利用 css 中的margin或者position方法完全可以实现以上效果，感2013-03-28
css 倒三角形 CSS 打造(此处有更多内容)的倒三角显示效果
倒三角显示效果可以隐藏更多的内容，这点可以充分利用页面有限布局，而且效果很时尚，有需要的朋友可以借鉴一下，或许可以打造出意想不到的效果，感兴趣的你可不要错过了啊2013-02-04使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解2013-01-06- 有很多新手朋友不知道如何使用css制作带小三角的tooltip提示框，本人研究整理了一下，晒出来和大家分享，希望可以帮助你们2012-12-05
- 在 twitter 上发了一条推，给一道 CSS 题给大家做。有几位同学给了回答，@zhiyelee 同学还给出了他的具体实现方案2012-06-27
- 用CSS也可以画画了.不错哦.下面我们来画一个三角形看看2012-06-04
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形2012-01-21- 今天随便修几个三角形2011-08-02
- 利用CSS的border属性可以生成一些图形，例如三角或是圆角。2010-12-27
- 之前在懒懒分会上分享的一点关于border画小图的内容, 完整的ppt在这里.2010-12-27
最新评论