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

`

liuxiang822

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

最近访客更多访客>>

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
浏览 1367
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

border-radius兼容ie78: 关于压缩包中的文件`border-radius兼容ie678`，这可能包含了一个完整的示例，用于演示如何在实际项目中应用CSS3 Pie来实现`border-radius`在IE6、7、8的兼容性。文件可能包括HTML、CSS和JavaScript代码，以及必要的...

Bootstrap-datetimepicker先天bug修复，兼容IE6+: 然而，如同许多前端组件一样，它可能存在一些与特定浏览器兼容性相关的先天bug，特别是对于老版本的Internet Explorer（如IE6、IE7等）。在这些老版本的IE浏览器中，由于其对CSS3、JavaScript和DOM的支持有限，可能...

让IE6也识别CSS3-圆角效果应用border-radius: 在现代浏览器中，如Chrome、Firefox、Safari、Opera以及更新版本的IE，`border-radius`的兼容性已经相当好。但对于IE6，由于其支持的CSS版本较低，自然无法直接理解并应用这个属性。为了让IE6能够实现圆角效果，...

纯css多级下拉菜单兼容ie6+主流浏览器: 本文将深入探讨如何使用纯CSS实现兼容IE6+及主流浏览器的多级下拉菜单，帮助Web开发者提升用户体验，同时简化开发流程。首先，让我们了解CSS（层叠样式表）的基本概念。CSS是一种用于描述HTML或XML（包括如SVG、...

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

通过border-image实现相册框的效果: 本文将详细讲解如何利用 `border-image` 实现相册框，并探讨其相关知识。首先，我们要了解 `border-image` 的基本语法： ```css element { border-image-source: url(path/to/image); border-image-slice: ...

解决border-radius失效问题: 6. **浏览器兼容性**：虽然`border-radius`在现代浏览器中得到了广泛支持，但老版本的浏览器可能不完全兼容。使用前缀（如 `-webkit-`，`-moz-`）来提高跨浏览器兼容性。 ```css div { -webkit-border-radius: 10...

QT使用border-image实现9宫格效果: 本文将详细介绍如何在QT中利用`border-image`属性来实现类似Android 9patch的效果。 9patch是Android平台上的一个特殊图像格式，它允许开发者创建可拉伸的图片，尤其适用于按钮、背景等需要自适应大小的UI元素。9...

纯css3网页相片鼠标悬停效果，鼠标悬停之后，图片的边框会逐层展开。支持ie9+，chrome，firefox浏览器: 为了确保这个效果在IE9+、Chrome和Firefox等主流浏览器中正常工作，我们需要使用跨浏览器兼容的CSS语法。CSS3的一些特性在旧版本的浏览器中可能不被支持，所以可能需要使用前缀如 `-webkit-` (针对Chrome/Safari)、`...

15种CSS3图片Hover悬停效果代码，超级实用，兼容IE9+、chrome、firefox浏览器.rar: 在本文中，我们将深入探讨如何使用CSS3来创建15种不同的图片悬停效果，这些效果不仅实用，而且兼容主流的现代浏览器，如IE9、Chrome和Firefox。这些技巧可以帮助开发者提升网站的交互性和用户体验。首先，让我们...

IE兼容CSS3圆角border-radius的方法（同时兼容box-shadow，text-shadow）: 本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。首先，`border-radius`属性是CSS3引入的新特性，允许我们为元素的边框创建圆角，而非传统的直角。然而，IE8及...

css下拉菜单示例，兼容ie678,ff,chrome: 本示例主要关注的是使用CSS创建下拉菜单，并确保该菜单在不同的浏览器环境下，如IE6、IE7、IE8、Firefox和Chrome中都能正常工作。这是一项重要的任务，因为不同浏览器可能对CSS的解析和渲染存在差异，需要进行适当的...

引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果: 虽然PIE.htc对于兼容旧版IE浏览器起到了重要作用，但它也有一定的局限性，例如性能问题、不支持动态改变样式以及对某些CSS3属性的支持不足等。随着浏览器的更新换代，现在大部分用户都已经升级到支持CSS3的浏览器，...

ie6 ie7 ff浏览器兼容: #### 标题解析：“ie6 ie7 ff浏览器兼容” 该标题明确指出了文章关注的核心问题——即确保网页能在IE6、IE7及Firefox等浏览器中正确显示。这意味着开发者需要采取一定的措施来适配这些浏览器，确保无论用户使用何种...

如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf: 针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器"，这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**： DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

css-border-effects.zip: 2. **边框宽度**：通过`border-width`属性可以设定边框的厚度，例如`thin`、`medium`、`thick`或者具体的像素值。 3. **边框风格**：`border-style`属性允许设置不同的边框样式，如`solid`（实线）、`dashed`（虚线...

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

css3(border-radius)边框圆角详解: border-radius 属性是 CSS3 中用于生成圆角边框的属性，支持浏览器包括 IE 9、Opera 10.5、Safari 5、Chrome 4 和 Firefox 4。该属性可以设定圆角的半径，并且可以同时设置四个圆角的半径。所有合法的 CSS 度量值都...

border-radius.htc: 在现代浏览器中，如Chrome、Firefox、Safari和Edge等，直接使用`border-radius`属性即可实现圆角效果。然而，对于旧版的IE（尤其是IE8及更早版本），它们并不支持这个属性，因此开发者需要寻找替代方案，这就是...

CSS完美兼容IE6IE7FF的通用方法: ### CSS完美兼容IE6、IE7与Firefox的通用方法详解在Web开发的历史长河中，浏览器兼容性一直是开发者面临的重大挑战，尤其是处理早期版本的Internet Explorer（IE6和IE7）与现代浏览器如Firefox之间的差异。本文将...

Global site tag (gtag.js) - Google Analytics