利用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. Fibonacci 数列第 N项 O(logN)算法

    时间复杂度为O( log n )的方法: 该算法使用矩阵乘法操作,使得算法时间复杂度为 O(logN) long long Fibonacci( unsigned n ) { ] = {, }; ) ...

  2. 查看SQL Server 2008的版本及位数

    如何查看SQL Server 2008的版本及位数及SP版本: 登录SQL Server,找到“SQL查询分析器”,输入“Select @@version”,运行,即可看出版本及SP版本. 该方法适用 ...

  3. linux 命令汇总

    一 Grep 命令 各种参数: -i:ignore-case忽略大小写 -c :打印匹配的行数 -l :从多个文件中查找包含匹配项 -v :查找不包含匹配项的行 -n :打印包含匹配项的行和行标 -w ...

  4. echarts学习总结(一):图表溢出窗口,图表数据窗口显示不全

    如上图所示:echarts图形左面的数据没有完全显示 只需在option中定义一下grid,例如:                                                gri ...

  5. iOS label换行 自适应

    //自动折行设置 addressDetailLab.lineBreakMode = NSLineBreakByWordWrapping; addressDetailLab.numberOfLines ...

  6. pipe的实现

    本文进行了详细的描述,http://blog.csdn.net/zhouhong1026/article/details/8151235

  7. VS2010 自定义向导

    最近在学OpenGL,不想使用OpenGL的GLUT工具,自己写了一个初始化OpenGL的类,并在win32中使用,每次都要新建一个win32项目,然后将OpenGL初始化类拷贝到项目,然后进行各种初 ...

  8. 使用jquery的js的页面实现例子

    var validate;var nodeId="";var modifyappId=""; addExportTaskURL = ctx + "/x ...

  9. overload与override

    一.override(重写.覆写) 1.子类重写父类的方法(两同一小一大一权限) ① 方法签名必须相同,返回值类型必须相同. ② 抛出的异常必须小于等于父类方法 ③ 权限修饰符必须大于等于父类方法的权 ...

  10. php薪资

    2千的php程序员就是可以用cms,做一个小企业的门户网站. 3千的php程序员,可以自己写代码开发php软件,但是这样程序员写的代码非常混乱,通常只能写数千行代码的小软件,并且痛苦的完工. 4K的p ...