利用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/ ...
随机推荐
- Linq分组,linq方法分组
Group在SQL经常使用,通常是对一个字段或者多个字段分组,求其总和,均值等. Linq中的Groupby方法也有这种功能.具体实现看代码: 假设有如下的一个数据集: 01.public class ...
- idea控制台输出乱码
找到安装目录bin下面的idea64.exe.vmoptions,打开后在最后一行增加 -Xms128m -Xmx750m -XX:MaxPermSize=350m -XX:ReservedCodeC ...
- Gym 100917L Liesbeth and the String 规律&&胡搞
题目: Description standard input/outputStatements Little Liesbeth likes to play with strings. Initiall ...
- hiho 1015 KMP
input 1<=T<=20 string1 1<=strlen(string1)<=1e4 string2 2<=strlen(string2)<=1e6 out ...
- 最小点集覆盖/HDU2119
题目连接 先试一下题/?/ 最小点集覆盖=最大匹配 /*根据i.j建图,跑一边最大匹配 */ #include<cstdio> #include<cstring> using ...
- 破解MyEclipse2013注册码
1.下载破解工具 http://down8.3987.com:801/2010/Myeclipse_zcj.3987.com.rar 2.打开 找到meclipse安装路径找到plugins文件夹打开 ...
- php下载文件的一种方式
<?php ob_start(); // $file_name="cookie.jpg"; $file_name="abc.jpg"; //用以解决中文不 ...
- java 随机流
Example10_8.java import java.io.*; public class Example10_8 { public static void main(String args[]) ...
- UVA - 12563 Jin Ge Jin Qu hao (01背包变形)
此题应该注意两个点,首先背包容量应该缩减为t-1,因为最长的歌不超过三分钟,而劲歌金曲有678s,所以肯定要留出这个时间来.其次注意优先级,保证唱的歌曲数目最多,在此前提下尽可能的延长时间. 处理方法 ...
- dos命令创建安卓签名
1.dos下进入到jdk安装目录的bin目录, 如:C:\Program Files\Java\jdk1.7.0_79\bin 2.输入命令格式如: keytool -genkey -alias aa ...