利用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. 根据View获取该控制器

    //根据View获取控制器 - (UIViewController*)viewController { for (UIView* next = [self superview]; next; next ...

  2. log4j之mybatis配置

    简单记录一下,配置,因为项目要转向maven架构,所以jar有maven管理,配置完成之后发现原先的sql语句都出不来了,于是搜了一下 mybatis+log4j所需要的依赖如下(我列出我用的版本): ...

  3. pci 相关资料

    1.http://www.cnblogs.com/image-eye/archive/2012/02/15/2352699.html

  4. PCI-E调试方式

    PCI-E的调试步骤 1.板子插上去之后正常情况下使用lspci 就能看的一个设备 这个设备上存在几个ID,可以根据ID可以确定设备是否识识别到 2.然后就是加载设备的驱动的时候,设备驱动会有VEND ...

  5. linq中的分组和排序

    一.分组  group 组内成员 by 分组条件 into 组的信息 class Program { static void Main(string[] args) { string[] name = ...

  6. 笨方法学python--提问

    1 实现 用户在终端进行输入 的方法 print "how old are you?", age = raw_input() 该地方,第1名后面加逗号,然后必须换行 2 若要限制用 ...

  7. mouse的各种事件

    IE测试对象为IE9,不全 mousemove(元素内部移动) 鼠标在元素内部移动时触发,只要鼠标移动,即使只是又移动了一个像素,也会触发,这就意味着短时间内会触发多次事件 支持情况: js onmo ...

  8. php 四种基础的算法 ---- 冒泡排序法

    1. 冒泡排序法  *     思路分析:法如其名,就是像冒泡一样,每次从数组当中 冒一个最大的数出来.  *     比如:2,4,1    // 第一次 冒出的泡是4  *             ...

  9. NSObject Class 浅析

    Objective-C中有两个NSObject,一个是NSObject类,另一个是NSObject协议.而其中NSObject类采用了NSObject协议.在本文中,我们主要整理一下NSObject类 ...

  10. POJ 3419 Difference Is Beautiful(RMQ+二分 或者 模拟)

    Difference Is Beautiful Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%lld & %l ...