利用border-width实现等腰直角三角形，兼容IE6+、FF、chrome - Web前端--lewis_liux - ITeye博客

`

liuxiang822

浏览: 46587 次
性别:
来自: 常州

最近访客更多访客>>

th414

wnly2027

tobeno1

hzj1989

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

hjf0900380211：在ie7下加了before也没有任何效果.....
jquery.pseudo.js让IE6、7也能用伪类:before
liuxiang822：你上下都加了P标签，想要高度自适应很简单。给P标签高度加上百 ...
iframe高宽自适应
and80506： <!DOCTYPE html PUBLIC " ...
iframe高宽自适应
huangyunbin：呵呵，我也遇到类似的情况啊
诡异的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
summer_java：好。。。。我要弹出框。。
jQuery弹出层插件大全

利用border-width实现等腰直角三角形，兼容IE6+、FF、chrome

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用border-width实现等腰直角三角形</title>
<style>
	body{margin:0;background:#FFF}
	.d_a{width:100px;height:17px;margin:0 auto;border:1px solid #CCC;position:relative}
	.s_a{border-width:5px;border-style:solid;border-color:#000 #FFF #FFF #FFF;width:0;height:0;position:absolute;top:6px;right:3px;cursor:pointer;_overflow:hidden;}
</style>
</head>

<body>
	<div class="d_a">
    	<span class="s_a"></span>
    </div>
</body>
</html>

修改border-color可实现4个方向的三角。

分享到：

自定义EL表达式方法 | iframe高宽自适应

2012-01-12 14:09
浏览 1325
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

border-radius兼容ie78: css3的 border-radius 为了兼容ie8浏览器所用到的插件以及实例。为什么要50个字节啊，竟然不能设置成免费。。

ie6 ie7 ff浏览器兼容: ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...

详解CSS3中的box-sizing（content-box与border-box）: CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：...content-box：padding和border不被包含在定义的width和height之内。盒子的实际宽度=设置的widt

让IE6也识别CSS3-圆角效果应用border-radius: 让IE6也识别CSS3-圆角效果应用border-radius

QT使用border-image实现9宫格效果: 在QT上使用border-image实现类似Android 9patch的效果。

IE实现CSS3中的border-radius（圆角）: 让IE实现CSS3中的border-radius（圆角）

jquery弹窗插件，可拖拽、可定制多个参数，兼容IE5.5+: 1.兼容IE5.5+，插件css样式整合到了插件代码中，取消了1.0版的样式表新增拖拽功能(默认可拖拽)。可设置拖拽的触点元素,默认是border(弹窗的半透明的的边栏) 2.可在参数自定义弹窗border边框颜色和透明度 3.可设置...

eborder-client-win_2_11: eborder-client-win_2_11

border-radius IE8兼容处理的方法: 根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示：测试代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果: 引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果

css2中文手册学习css的必选: border border-color border-style border-width border-top border-top-color border-top-style border-top-width border-right border-right-color border-right-style border-right-width border-bottom border-...

通过border-image实现相册框的效果: 通过border-image实现相册框的效果,有说明文档

CSS border-width 属性使用教程: border-width — 定义四个边框的宽度取值:<border>{1,4} | inherit <border>{1,4}: 边框宽度(可以有一个,两个,三个或四个值) inherit:继承初始值: medium 继承性: 否适用于: 所有元素 border:边框,width:宽度....

浅析border-radius如何兼容IE: border-radius如何兼容IE呢？下面小编就为大家介绍一下border-radius兼容IE的方法。一起跟随小编过来看看吧，祝大家游戏愉快哦

CN-border-L1.dat中国国界数据: 中国边界数据外加省界数据，可用于画图

解决border-radius失效问题: 解决border-radius失效问题

table中的border-collapse属性: border属性 border-collapse属性

css-border-property:边框属性的解析器和字符串化器: { property: 'border-width', value: '1px' }, { property: 'border-style', value: 'solid' }, { property: 'border-color', value: '#eee' } ] */ border . stringify ( [ { property : 'border-width' , ...

border-radius失效: border-radius失效

Global site tag (gtag.js) - Google Analytics