利用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浏览器)的更多相关文章

  1. css写出三角形(兼容IE)

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

  2. 利用CSS3中transparent实现三角形及三角形组合图

    ??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...

  3. 用纯css写出三角形

    1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...

  4. 利用CSS3特性巧妙实现漂亮的DIV箭头

    DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...

  5. 利用display属性写出表格的布局样式

    demo地址:http://codepen.io/tianzi77/pen/gpBzjy 元素结构: <h1>display构造的table小样例,IE8及下面浏览器不支持本演示样例< ...

  6. 利用requestAnimationFrame和Tween算法实现兼容所有浏览器的运动动画,直接秒杀Css3动画

    以下贴出Tween的代码: /* * Tween.js * t: current time(当前时间): * b: beginning value(初始值): * c: change in value ...

  7. 利用纯代码写出一个秒表表盘的方法 —— #DF

    @interface ViewController () @property (nonatomic, strong) CALayer *secLayer; // 秒针layer @property ( ...

  8. Java 利用初学知识 写出自己的名字

  9. DIV JS CSS 轻量级弹出层 兼容各浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. JSP注释及scriptlet <%局部%><%!全局%><%=输出%>

    显示注释: <!--注释内容-->> 隐式注释: 1. // 2./* */ 3. <%-- 注释内容--%> <!-- 这个注释客户端就可以看见 --> & ...

  2. 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 ...

  3. avd

    http://stackoverflow.com/questions/2662650/making-the-android-emulator-run-faster http://www.cnblogs ...

  4. 3.1 cron表达式

    1.Cron在线生成网址:      http://cron.qqe2.com/   http://www.pdtools.net/tools/becron.jsp#cron 2.Cron 概要 3. ...

  5. 旋转图css3

    <!doctype html><html> <head>  <meta charset="UTF-8">  <title> ...

  6. OpenGL ES之glUniform函数

    函数名: glUniform 功能: 为当前程序对象指定Uniform变量的值.(译者注:注意,由于OpenGL ES由C语言编写,但是C语言不支持函数的重载,所以会有很多名字相同后缀不同的函数版本存 ...

  7. 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 ...

  8. 在CDockablePane中嵌入CFormView

    CDockablePane中嵌入CFormView与嵌入CDialogEx稍有不同,差异主要体现在CFormView类本身与CDialogEx类的不同上,CDockablePane层面的操作完全相同. ...

  9. 【转载】关于SetWindowOrgEx、SetViewportOrgEx、SetViewportExtEx 和SetWindowExtEx 详解

    关于SetWindowOrgEx.SetViewportOrgEx.SetViewportExtEx 和SetWindowExtEx 详解 1.  SetWindowOrgEx是设置窗口的原点坐标. ...

  10. Linux -- 统计文件的行数

    统计单个文件有多少行 方法1: awk '{print NR}' test1.sh|tail -n1 方法2: awk 'END{print NR}' test1.sh 方法3: grep -n &q ...