利用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/ ...
随机推荐
- JSP注释及scriptlet <%局部%><%!全局%><%=输出%>
显示注释: <!--注释内容-->> 隐式注释: 1. // 2./* */ 3. <%-- 注释内容--%> <!-- 这个注释客户端就可以看见 --> & ...
- UnicodeEncodeError: 'ascii' codec can't encode characters in position 14-15: ordinal not in range(128)
python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报类似这样的错误. UnicodeEncodeError: 'ascii' codec can't ...
- avd
http://stackoverflow.com/questions/2662650/making-the-android-emulator-run-faster http://www.cnblogs ...
- 3.1 cron表达式
1.Cron在线生成网址: http://cron.qqe2.com/ http://www.pdtools.net/tools/becron.jsp#cron 2.Cron 概要 3. ...
- 旋转图css3
<!doctype html><html> <head> <meta charset="UTF-8"> <title> ...
- OpenGL ES之glUniform函数
函数名: glUniform 功能: 为当前程序对象指定Uniform变量的值.(译者注:注意,由于OpenGL ES由C语言编写,但是C语言不支持函数的重载,所以会有很多名字相同后缀不同的函数版本存 ...
- Java NIO Related
A file's status is 3-valued: The file is verified to exist; The file is verified to not exist; The f ...
- 在CDockablePane中嵌入CFormView
CDockablePane中嵌入CFormView与嵌入CDialogEx稍有不同,差异主要体现在CFormView类本身与CDialogEx类的不同上,CDockablePane层面的操作完全相同. ...
- 【转载】关于SetWindowOrgEx、SetViewportOrgEx、SetViewportExtEx 和SetWindowExtEx 详解
关于SetWindowOrgEx.SetViewportOrgEx.SetViewportExtEx 和SetWindowExtEx 详解 1. SetWindowOrgEx是设置窗口的原点坐标. ...
- Linux -- 统计文件的行数
统计单个文件有多少行 方法1: awk '{print NR}' test1.sh|tail -n1 方法2: awk 'END{print NR}' test1.sh 方法3: grep -n &q ...