css实现三角形及应用示例
2015-01-04 13:53
288 查看
css实现三角形,网上讲了很多,但我发现一般都是三角向上或者向下的,向左向右这两方向似乎讲得很少,本人试了一下,发现原来在IE下很难搞~~(万恶的IE)...
css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重叠处分45度角平分。讲得很别扭~~~上个图吧:
.triangle {
border-color: red green blue pink;
border-style: solid;
border-width: 20px 20px 20px 20px;
width: 0;
height: 0;
}
<div class="triangle"/>
</div>
那么,我们只有留下一条边框的时候会发现什么??
.triangle {
border-color: red transparent transparent transparent;
border-style: solid;
border-width: 20px 20px 0px 20px;
width: 0;
height: 0;
}
怎样?出来了吧~~
同样道理,我们改成为向左向右的,
向左: .triangle {
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 20px 20px 20px 0px;
width: 0;
height: 0;
}
向右: .triangle {
border-color: transparent transparent transparent red;
border-style: solid;
border-width: 20px 0px 20px 20px;
width: 0;
height: 0;
}
大功造成!? 慢,你用的是什么浏览器?如果用的是非IE6的话,恭喜你!下面我们用IE6(咬牙切齿ing...),
汗~~~~
原来,IE6默认给了背景黑色~~
只有好用IE专有的东东了,解铃还需系铃人(~_~)
首先,css hack,用下划线"_"!
_border-top-color: white;
_border-bottom-color: white;
然后用chroma filter : _filter: chroma( color =white);
其实就是把不要的边过滤掉!
还要加上 font-size: 0; line-height: 0;
这样就彻底的去掉了黑色背景:
.triangle {
border-color: transparent transparent transparent red;
border-style: solid;
border-width: 20px 0px 20px 20px;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
_border-top-color: white;
_border-bottom-color: white;
_filter: chroma( color =white);
}
html+css:
Js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css三角形</title>
<style>
.tipArrow {
/*右边有颜色,其他透明*/
border-color: transparent #e00 transparent transparent;
border-style: solid;
border-width: 6px 6px 6px 0px;
padding: 0;
width: 0;
height: 0;
/* ie6 height fix */
font-size: 0;
line-height: 0;
/* ie6 transparent fix */
_border-top-color: #dddddd;
_border-bottom-color: #dddddd;
_filter: chroma( color = #dddddd);
}
</style>
</head>
<body>
<div class="tipArrow"/>
</div>
</body>
</html>
知道有些同学要直接看效果的,哈哈:看
下载
三角形是出来了,那我们看一个应用的例子(结合了之前写的fadeIn,fadeOut):
http://kingkit.com.cn/KUI/Tip.html
完整打包
css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重叠处分45度角平分。讲得很别扭~~~上个图吧:
.triangle {
border-color: red green blue pink;
border-style: solid;
border-width: 20px 20px 20px 20px;
width: 0;
height: 0;
}
<div class="triangle"/>
</div>
那么,我们只有留下一条边框的时候会发现什么??
.triangle {
border-color: red transparent transparent transparent;
border-style: solid;
border-width: 20px 20px 0px 20px;
width: 0;
height: 0;
}
怎样?出来了吧~~
同样道理,我们改成为向左向右的,
向左: .triangle {
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 20px 20px 20px 0px;
width: 0;
height: 0;
}
向右: .triangle {
border-color: transparent transparent transparent red;
border-style: solid;
border-width: 20px 0px 20px 20px;
width: 0;
height: 0;
}
大功造成!? 慢,你用的是什么浏览器?如果用的是非IE6的话,恭喜你!下面我们用IE6(咬牙切齿ing...),
汗~~~~
原来,IE6默认给了背景黑色~~
只有好用IE专有的东东了,解铃还需系铃人(~_~)
首先,css hack,用下划线"_"!
_border-top-color: white;
_border-bottom-color: white;
然后用chroma filter : _filter: chroma( color =white);
其实就是把不要的边过滤掉!
还要加上 font-size: 0; line-height: 0;
这样就彻底的去掉了黑色背景:
.triangle {
border-color: transparent transparent transparent red;
border-style: solid;
border-width: 20px 0px 20px 20px;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
_border-top-color: white;
_border-bottom-color: white;
_filter: chroma( color =white);
}
html+css:
Js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css三角形</title>
<style>
.tipArrow {
/*右边有颜色,其他透明*/
border-color: transparent #e00 transparent transparent;
border-style: solid;
border-width: 6px 6px 6px 0px;
padding: 0;
width: 0;
height: 0;
/* ie6 height fix */
font-size: 0;
line-height: 0;
/* ie6 transparent fix */
_border-top-color: #dddddd;
_border-bottom-color: #dddddd;
_filter: chroma( color = #dddddd);
}
</style>
</head>
<body>
<div class="tipArrow"/>
</div>
</body>
</html>
知道有些同学要直接看效果的,哈哈:看
下载
三角形是出来了,那我们看一个应用的例子(结合了之前写的fadeIn,fadeOut):
http://kingkit.com.cn/KUI/Tip.html
完整打包
相关文章推荐
- css实现三角形及应用示例
- XHTML+CSS应用教程——利用CSS实现双语导航条
- 50种强大的CSS技术||struts+spring+hibernate的web应用示例
- css绘画三角形,实现一些图形
- 小助手(应用盒子之我的实现思路及示例程序)
- 三种纯CSS实现三角形的方法
- css终极应用(各国国旗的实现)
- URL Scheme 应用示例(双向openURL实现,调用特定的其他应用程序)
- css三角形实现写法全攻略收集
- 【荐】JavaScript+CSS技术实现能覆盖SELECT的图片放大(放大镜)示例代码
- 纯CSS代码实现翻页(两个示例)
- css实现无图片三角形垂直导航条
- css实现三角形
- CSS技巧之圆角背景与三角形实现方法
- URL Scheme 应用示例-双向openURL实现
- 使用Log4j为项目配置日志输出应用详解以及示例演示的实现分析
- XHTML+CSS应用教程——CSS实现小提示框
- 利用OnCreateControl实现控件风格一致(一个OnCreateControl方法的应用示例)
- 实例:应用CSS实现表单form布局(博主:http://www.bm777.com/post/32.html)
- URL Scheme 应用示例(双向openURL实现,调用特定的其他应用程序)