利用css3特性写出三角形(兼容IE浏览器)
利用CSS写出三角形的效果
效果如图:

代码如下:
.triangle-up {
width:0px;
height:0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid red;
font-size:0px;
line-height:0px;
margin: 0 auto;
}
.triangle-down {
width:0px;
height:0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid blue;
font-size:0px;
line-height:0px;
}
.triangle-left {
width:0px;
height:0px;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-right:10px solid #DC143C;
font-size:0px;
line-height:0px;
}
.triangle-right {
width:0px;
height:0px;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-left:10px solid #FF00FF;
font-size:0px;
line-height:0px;
}
利用css3特性写出三角形(兼容IE浏览器)的更多相关文章
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 利用CSS3中transparent实现三角形及三角形组合图
??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
- 利用CSS3特性巧妙实现漂亮的DIV箭头
DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...
- 利用display属性写出表格的布局样式
demo地址:http://codepen.io/tianzi77/pen/gpBzjy 元素结构: <h1>display构造的table小样例,IE8及下面浏览器不支持本演示样例< ...
- 利用requestAnimationFrame和Tween算法实现兼容所有浏览器的运动动画,直接秒杀Css3动画
以下贴出Tween的代码: /* * Tween.js * t: current time(当前时间): * b: beginning value(初始值): * c: change in value ...
- 利用纯代码写出一个秒表表盘的方法 —— #DF
@interface ViewController () @property (nonatomic, strong) CALayer *secLayer; // 秒针layer @property ( ...
- Java 利用初学知识 写出自己的名字
- DIV JS CSS 轻量级弹出层 兼容各浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- SB淘宝api的奇葩问题! 一则服务器无法访问淘宝api
<?xml version="1.0" encoding="utf-8" ?><error_response><code>3 ...
- htaccess 实现网址缩短
访问 :app.xxx.com/a 解析到:app.xxx.com/index.php/app/a <IfModule mod_rewrite.c> RewriteEngine on Re ...
- perl中调用cgi
来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698856.html 参考:http://www.willmaster.com/librar ...
- 相对路径json无法获取
在获取json文件内容时,有时会出现相对路径上的json文件无法获取的情况,Chrome上的解决方案如下: 1.右击桌面上的Chrome浏览器图标,点击属性; 2.在目标输入框的内容后头加上--arg ...
- FTP: Configuring server users..
4 points to create a user to uploade to ftproot.. this user must be an administrator, and be able to ...
- CI 框架 hooks 的调用方法
流程:在hooks中写一个类 , 在system/core/CodeIgniter.php 判断什么时候执行 hooks中的类 涉及到了php反射获取类 方法 方法中的注释 ...
- Lucene全文搜索 分组,精确查找,模糊查找
http://zm603380946.iteye.com/blog/1827318 完全个人理解,如有更好的方法,欢迎一起讨论 LuceneUtils.java package com.zbiti.l ...
- java 面向抽象编程的思想
SIM.java public abstract class SIM { public abstract void setNumber(String n); public abstract Strin ...
- Node.js学习 - Event Loop
Node.js本身是单线程,但通过事件和回调支持并发,所以性能非常高. Node.js的每一个API都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. 事件驱动程序 实例 var ev ...
- php简单命令代码集锦
if(file_exists("file.htm"))// 检查是否存在此文件 if(file_exists("chat"))//检查是否存在此文件夹 rena ...