利用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. uCGUI的文字与数值显示方法

    uCGUI的数值显示非常的灵活方便,是制作LCD界面非常好的选择. 文字与数值显示的方法: 常用文本显示函数: void GUI_DispStringAt(const char GUI_FAR *s, ...

  2. Linux网卡配置与绑定

    一定要在服务管理中关闭NetworkManager服务并禁用自动启动. 第一步:先查看下本机网卡,使用命令到network-scripts 下 [root@root~]# cd /etc/syscon ...

  3. 注意题目条件!!! 团问题 HDU 5952

    题目大意:团的定义就是,团内的所有点,两两之间各有一条边,团的大小就是点的个数.现给你一个n个点,m条边的图.问,该图中有多少点的个数为s的团. (题目保证每个点的度数不超过20,n<=100, ...

  4. 概率好题 Light OJ 1027

    题目大意:你在迷宫里,有n扇门,每个门有一个val,这个val可正可负,每次通过一扇门需要abs(x)分钟,如果这个门的val是正的,那么就直接出了迷宫,否则回到原地,问出去迷宫的期望是多少? 思路: ...

  5. mongostat

    监控MongoDB有一下几种方法: 1)使用MongoDB软件包自带的工具,如mongostat,mongotop等.2)使用MongoDB数据库命令3)使用MongoDB公司提供的MMS监控服务 m ...

  6. Git如何删除版本库中的一个提交?

     如果不小心增加了一个最新的提交,可以通过以下的操作删除,记住:是删除最新的提交,如果回滚到其他的提交上面,就会导致之后的全部消失. 1.git reset --hard HEAD~1    2.gi ...

  7. 两种方法将oracle数据库中的一张表的数据导入到另外一个oracle数据库中

    oracle数据库实现一张表的数据导入到另外一个数据库的表中的方法有很多,在这介绍两个. 第一种,把oracle查询的数据导出为sql文件,执行sql文件里的insert语句,如下: 第一步,导出sq ...

  8. 转 Oracle 12C 之 CDB/PDB用户的创建与对象管理

    在Oracle 12C中,账号分为两种,一种是公用账号,一种是本地账号(亦可理解为私有账号).共有账号是指在CDB下创建,并在全部PDB中生效的账号,另一种是在PDB中创建的账号. 针对这两种账号的测 ...

  9. Tab选项卡的原生写法

    关键点:建立点击事件和显示事件的连接,即点li 1让对应的div1出来,很容易想到遍历.索引 ;;} ul,li{list-style: none;} .tab{background: rgba(2, ...

  10. NSFileManager创建文件夹

    NSFileManager*fileManager = [[NSFileManager alloc] init]; NSString *pathDocuments = [NSSearchPathFor ...