纯CSS制作三角(转)
原原文地址: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制作三角(转)的更多相关文章
- 追求极致--纯css制作三角、圆形按钮,兼容ie6
参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 纯css制作带三角border篇(兼容所有浏览器)
今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...
- 纯css制作带三角(兼容所有浏览器)
如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...
随机推荐
- CI中PHP写法规范(不断更新)
1.类名首字母大写,多个单词用下划线连接,首字母小写是无效的 举例: class CI_Model 2.routes路由配置中的右侧在配置类名和方法名的时候都是小写,如果大写可能会出现404找不到的错 ...
- JSP页面中的pageEncoding和contentType两种属性
关于JSP页面中的pageEncoding和contentType两种属性的区别: pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容 ...
- 【HTML5】拖放(Drag 和 drop)
效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { ...
- 【JNI】C向C++改造
步骤: 1. 把c文件后缀名换成cpp2. Android.mk文件中的hello.c也要换成hello.cpp3. c++的使用的环境变量结构体中,访问了c使用的结构体的函数指针,函数名全部都是一样 ...
- Linux常用命令_(磁盘管理)
磁盘信息:df.du df命令–功能:检查文件系统的磁盘空间占用情况–语法:df [选项]–选项:-a 显示所有文件系统的磁盘使用情况,包括0块(block)的文件系统,如/proc文件系统.-k 以 ...
- BZOJ3482 : [COCI2013]hiperprostor
对于每组询问,spfa求出f[i][j]表示从S出发,经过j条x边到达i的最短路. 若f[T][i]都为inf,则无解. 若f[T][0]为inf,则有无穷个解. 否则可以看作若干条直线,$O(n)$ ...
- BZOJ3276 : 磁力
按距离建立线段树,维护区间重量最小值 然后跑一遍拓扑,每次将所有能取的加入队尾 #include<cstdio> #include<algorithm> #define N 2 ...
- 一份spring配置文件及其详解
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/axu20/archive/2009/10/14/4668188.aspx 1.基本配置:<?xml versio ...
- android sdk 安装排错
如果你遇到了消息为“Failed to fetch URL…” 的错误提示,那么你需要将HTTPS方式改为HTTP方式,方法如下: 碰到这样错误,请按下边的操作. 1)在菜单选择Tools—Optio ...
- 【BZOJ】2463: [中山市选2009]谁能赢呢?(博弈论)
http://www.lydsy.com/JudgeOnline/problem.php?id=2463 好神的证明! 首先对于n是偶数,一定能被1*2的骨牌覆盖!所以从起点开始,先手一定走的是骨牌的 ...