原原文地址:http://www.w3cplus.com/code/303.html

原文地址:http://blog.csdn.net/dyllove98/article/details/8967012

以前写过一篇纯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制作三角(转)的更多相关文章

  1. 追求极致--纯css制作三角、圆形按钮,兼容ie6

    参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  2. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  3. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  5. 如何使用纯CSS制作特效导航条?

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  6. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  7. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

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

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

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

    如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...

随机推荐

  1. CI中PHP写法规范(不断更新)

    1.类名首字母大写,多个单词用下划线连接,首字母小写是无效的 举例: class CI_Model 2.routes路由配置中的右侧在配置类名和方法名的时候都是小写,如果大写可能会出现404找不到的错 ...

  2. JSP页面中的pageEncoding和contentType两种属性

    关于JSP页面中的pageEncoding和contentType两种属性的区别: pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容 ...

  3. 【HTML5】拖放(Drag 和 drop)

    效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { ...

  4. 【JNI】C向C++改造

    步骤: 1. 把c文件后缀名换成cpp2. Android.mk文件中的hello.c也要换成hello.cpp3. c++的使用的环境变量结构体中,访问了c使用的结构体的函数指针,函数名全部都是一样 ...

  5. Linux常用命令_(磁盘管理)

    磁盘信息:df.du df命令–功能:检查文件系统的磁盘空间占用情况–语法:df [选项]–选项:-a 显示所有文件系统的磁盘使用情况,包括0块(block)的文件系统,如/proc文件系统.-k 以 ...

  6. BZOJ3482 : [COCI2013]hiperprostor

    对于每组询问,spfa求出f[i][j]表示从S出发,经过j条x边到达i的最短路. 若f[T][i]都为inf,则无解. 若f[T][0]为inf,则有无穷个解. 否则可以看作若干条直线,$O(n)$ ...

  7. BZOJ3276 : 磁力

    按距离建立线段树,维护区间重量最小值 然后跑一遍拓扑,每次将所有能取的加入队尾 #include<cstdio> #include<algorithm> #define N 2 ...

  8. 一份spring配置文件及其详解

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/axu20/archive/2009/10/14/4668188.aspx 1.基本配置:<?xml versio ...

  9. android sdk 安装排错

    如果你遇到了消息为“Failed to fetch URL…” 的错误提示,那么你需要将HTTPS方式改为HTTP方式,方法如下: 碰到这样错误,请按下边的操作. 1)在菜单选择Tools—Optio ...

  10. 【BZOJ】2463: [中山市选2009]谁能赢呢?(博弈论)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2463 好神的证明! 首先对于n是偶数,一定能被1*2的骨牌覆盖!所以从起点开始,先手一定走的是骨牌的 ...