css实现三角形及应用示例
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:
- <!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):
css实现三角形及应用示例的更多相关文章
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS绘制三角形和箭头,不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- CSS实现三角形
突然想起搞一把三角形. 简单来说: 建一个div 宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
随机推荐
- xcode自动打ipa包脚本 资料
http://webfrogs.me/2012/09/19/buildipa/ http://blog.csdn.net/baxiaxx/article/details/8267295 http:// ...
- 使用Spring4时, 运行时出现找不到MappingJacksonHttpMessageConverter的情况
启动项目报错: [org.springframework.web.context.ContextLoader]Context initialization failed org.springframe ...
- 用Power BI观察经济与健康的关系
Hans Rosling是卡罗琳学院的国际卫生学教授.这位学者与众不同的技能是数据可视化.以直观的数据展现了令人信服的世界观,而且在gapminder.org提供无偿展示以及下载.假设你没有看过下面的 ...
- MQ有啥用
Q:最近看了一些MSMQ的资料,感觉很是奇怪,在IIS中装上此服务后,感觉这东西就像一个小数据库一样,暂时保存一些发送过来的数据,然后另一端再去收取?A:是的. Q:这样有什么用呢?直接在数据库中建立 ...
- JS location.href跳出框架打开新页面
后面在框架中,当判断登录失效后要返回登录页面,但登录页面却在框架内打开,我想让它直接跳出框架打开,这里不是打开新窗口. echo "<script language=\"ja ...
- MD5 和的价值体现在哪里,它是用来做什么的?
MD5 和的价值体现在哪里,它是用来做什么的? MD5 和是由字母和数字构成的字符串,起到了文件指纹的作用.如果两个文件有相同的 MD5 和值,那么,文件完全相同.您可以为每一软件下载使用所提供的 M ...
- 【Unity】7.2 鼠标输入
分类:Unity.C#.VS2015 创建日期:2016-04-21 一.简介 在桌面系统的游戏中,鼠标输入是最基本的输入方式之一.游戏很多操作都需要鼠标来完成,例如武器的瞄准和开火.菜单的单击.物体 ...
- elastic search internal
Realtime Search with Lucene http://2010.berlinbuzzwords.de/sites/2010.berlinbuzzwords.de/files/busch ...
- Sql Server 2008 清除日志
--在SQL2008中清除日志就必须在简单模式下进行,等清除动作完毕再调回到完全模式. USE [master] GO ALTER DATABASE SSCDZ SET RECOVERY SIMPLE ...
- javascript基础拾遗(十二)
1.javascript的单线程特性 在javascript中,所有的代码都是单线程的 因此所有的网络操作,浏览器事件,都必须是异步执行的,异步执行的逻辑是回调. function callback( ...