利用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/ ...
随机推荐
- MySQL 对于千万级的大表要怎么优化
转自知乎 作者:哈哈链接:http://www.zhihu.com/question/19719997/answer/81930332来源:知乎著作权归作者所有,转载请联系作者获得授权. 很多人第一反 ...
- OpenGL编程指南第版本学习笔记 --- OpenGL程序实现过程(win32 + OpenGL)
1. 先上代码 头文件glCommon.h #include <GL/glew.h> #include <GL/GL.h> #include <GL/GLU.h> ...
- HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性
1.基本CSS选择器 (1)标记选择器 <style> h1{ color:red; font-size:25px;} &l ...
- selenium2(WebDriver) API
selenium2(WebDriver) API 作者:Glen.He出处:http://www.cnblogs.com/puresoul/ 1.1 下载selenium2.0的包 官方downl ...
- asp网站中使用百度ueditor教程
1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1. ...
- UIKit控件直接显示网页文字内容
NSString *html = @"<bold>Hello</bold> Now<br> <em>iOS</em> can cr ...
- GDB调试程序常用命令
1.在xv6 内核中 通过 nm kernel | grep _start 找到kernel的起始地址是0010000c 8010b50c D _binary_entryother_start 801 ...
- Zookeeper: configuring on centos7
thispassage is referenced, appreciated. ZooKeeper installation: Download from this site Install java ...
- php 后台权限例子 (mysql 数据表)
说明 超级管理员的权限最高 可以操作所有的功能 !!! 超级管理员给特定的用户分配对应的权限 下文注解: 用户表 关联 用户组表 每个用户组对应特定的功能权限 !! ...
- iOS Learning
转载自:http://www.cocoachina.com/ios/20150111/10894.html iOS 学习资料整理 2015-01-11 20:20 编辑: suiling 分类:iOS ...