利用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. Shell脚本,自动化发布tomcat项目【转载】

    Shell脚本,自动化发布tomcat项目脚本. 1. vko2c_auto_build_by_scp.sh 文件内容: #---------------------start------------ ...

  2. textarea内容太多, 鼠标点击全部显示

    strRight+="<td bordercolor='#DEDEDE' width='500px' height='50'><div title='"+data ...

  3. MULE-ET0 、 ET1、ET2、PT1、PT2

    设计验证阶段中的五个样车试制概念 骡子车( mule car ) ET0 第一轮设计工程样车试制 ET1 第二轮设计工程样车试制 ET2 第一轮产品工装样车试制 PT1 第二轮产品工装样车试制 PT2 ...

  4. 文件系统满的话(filesystem full),该如何处理。

    #!/bin/bash function ergodic(){ ` do "/"$file ] then ergodic $"/"$file else loca ...

  5. 【RMQ】 区间最值查询详解

    1. 概述 RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A ...

  6. Spring Boot 系列教程11-html页面解析-jsoup

    需求 需要对一个页面进行数据抓取,并导出doc文档 html解析器 jsoup 可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操 ...

  7. UVALive 2056 Lazy Math Instructor(递归处理嵌套括号)

    因为这个题目说明了优先级的规定,所以可以从左到右直接运算,在处理嵌套括号的时候,可以使用递归的方法,给定每一个括号的左右边界,伪代码如下: int Cal(){ if(括号)  sum += Cal( ...

  8. ios 基础学习二

    1:@property  @synthesize 属性(类似java里的get set) 上面那个类原先的实现是这样: #import @interface Photo : NSObject { NS ...

  9. Zend Optimizer not installed可能原因及解决方法

    Zend Optimizer not installed可能原因及解决方法 Optimizer, Zend 在配置php服务器的时候,所有的东西都安装好了,就是浏览一个要求zend的程序的时候,总是提 ...

  10. 初学HTML5的一点理解

    刚接触了一点点用h5移动端的一点知识,用自己最浅薄的理解来看解决自适应屏幕尺寸问题和适应屏幕尺寸的布局问题.这里,为了解决自适应屏幕尺寸问题大概需要做的就是把HTML中的元素的尺寸尽可能的用百分比表示 ...