`
liuxiang822
  • 浏览: 47985 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

利用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个方向的三角。

分享到:
评论

相关推荐

    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