利用css3特性写出三角形(兼容IE浏览器)
利用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浏览器)的更多相关文章
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 利用CSS3中transparent实现三角形及三角形组合图
??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
- 利用CSS3特性巧妙实现漂亮的DIV箭头
DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...
- 利用display属性写出表格的布局样式
demo地址:http://codepen.io/tianzi77/pen/gpBzjy 元素结构: <h1>display构造的table小样例,IE8及下面浏览器不支持本演示样例< ...
- 利用requestAnimationFrame和Tween算法实现兼容所有浏览器的运动动画,直接秒杀Css3动画
以下贴出Tween的代码: /* * Tween.js * t: current time(当前时间): * b: beginning value(初始值): * c: change in value ...
- 利用纯代码写出一个秒表表盘的方法 —— #DF
@interface ViewController () @property (nonatomic, strong) CALayer *secLayer; // 秒针layer @property ( ...
- Java 利用初学知识 写出自己的名字
- DIV JS CSS 轻量级弹出层 兼容各浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 一篇很全面的freemarker教程 前端工程师必备
FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成: 1,文本:直接输出的部分 2,注释:<#-- ... -->格式部分,不会输 ...
- 为什么要在onNewIntent的时候要显示的去调用setIntent
一.原因: 当调用到onNewIntent(intent)的时候,需要在onNewIntent() 中使用setIntent(intent)赋值给Activity的Intent.否则,后续的getIn ...
- XTEA加密算法
XTEA加密算法 #include <stdint.h> /* take 64 bits of data in v[0] and v[1] and 128 bits of key[0] - ...
- typeof判断类型(数组类型得用instanceof)
var a= 1; console.log(typeof a); var b= '1'; console.log(typeof b); var c; console.log(typeof c); va ...
- 观光公交noip<贪心>
题目链接:https://www.oj.swust.edu.cn/problem/show/1190 思路: 每在一段路上使用一次加速器,就会对某些人或者说某些路段上的人产生影响,目的是使产生的影响最 ...
- List、Set、Map集合存放null解析及HashMap、Hashtable异同点解析
1.List.Set.Map集合存放null解析: @Test public void CollectionTest() { // 测试List List<Object> list = n ...
- Android 开发——如何显示 GIF 动画
gif 图动画在 android 中还是比较常用的,比如像新浪微博中,有很多 gif 图片,而且展示非常好,所以我也想弄一个.经过我多方的搜索资料和整理,终于弄出来了,其实 github 上有很多开源 ...
- 深入理解linux网络技术-P179
上锁 net_device结构的组织一节可知,dev_base列表以及dev_name_head和dev_name_index两张hash表由dev_base_list锁保护.然而,该锁只用于对列表和 ...
- 用python计算md5,sha1,crc32
Linux下计算md5sum,sha1sum,crc: 命令 输出 $md5sum hello f19dd746bc6ab0f0155808c388be8ff0 hello $sha1sum hel ...
- Linux设置某软件开机自动启动的方法
方法一 将启动命令写到系统启动时会自动调用的脚本中 echo "/usr/local/apache2/bin/apachectl start" >> /etc/rc.d ...