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):
http://kingkit.com.cn/KUI/Tip.html
完整打包
- 大小: 5.5 KB
- 大小: 1.2 KB
- 大小: 3.7 KB
- 大小: 15.8 KB
分享到:
相关推荐
主要介绍了css实现带圆角三角型的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要给大家介绍了如何用CSS属性transparent实现各种三角形,文中给出了详细的示例代码,有需要的朋友们可以参考借鉴,下面来跟着小编一起来学习学习吧。
具体代码如下所示: html代码是这样的 <!--向上的三角--> <!--向下的三角-->...下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border
怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和...
气泡提示框牵扯到的技术有:JS响应鼠标的事件、纯CSS制作三角形,附截图及示例代码,感兴趣的朋友可以参考下
准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标,本文两种实现方式: 使用或不使用 before 和 :after 伪元素,示例如下,有此需求的朋友可以参考下
主要介绍了一波CSS制作的三角形和圆形小按钮示例,都采用了灰色的常见按钮样式设计,需要的朋友可以参考下
为实现如下效果呕心沥血: 当然你可以拥抱 Svg…在此分享如何纯 Css 打造圆环进度条,只需三步! 此物乃 2 + 1 夹心饼干,蓝绿色部分为果酱。显而易见饼干为两个削成了圆形的 div,我们重点演示果酱是怎么制作的:...
这个示例代码就是上面是红色,下面是黑色,渐变色的。 复制代码代码如下: <style type=”text/css”> #round { height: 200px; width:100px; margin:0px auto; background-image: -moz-linear-gradient(top, ...
三角形示例 示例代码: <style type="text/css"> .triangle b { border: 5px solid #fff; border-left: 5px solid #353535; margin: 0; font-size: 0; } </style> 方向箭头示例 示例代码: &...
本文分享一个利用CSS3制作三角形的示例,感兴趣的朋友可以参考一下。
您将获得:用于渲染各种 2D 形状的代码示例,包括矩形、圆形、三角形、椭圆、椭圆弧、棋盘图案和对角线,结合线性和径向渐变以创建不寻常的视觉效果(有点像马蒂斯-遇见-沃霍尔-遇见-杰斐逊-飞机在21世纪)。...
本文为大家介绍下使用纯css实现的交互小三角箭头图标,示例代码如下,感兴趣的朋友可以参考下
只不过它这个尖角是通过两个三角形来实现的; 首先新建一个div,画出提示框的轮廓 <div class=demo></div> 给定样式: .demo{ width:100px; height:100px; position:absolute; top: 35%; left:40%; bo
实现三角形 示例1: CSS Code复制内容到剪贴板 #test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; border-style:solid; border-width:20px; } 示例2: 在上面的