蝙蝠岛资源网

使用css实现全兼容浏览器的三角形
网络编程 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的“吹毛求疵”，越来越多的前端开发者开始“返璞归真”，在能不使用图片的场景中减少图片使用，css图标相对于图片还有个优势是我们可以方便的定制图标的大小以及颜色。

css实现三角形图标已不是什么新鲜技术，之前也有很多相关的技术文章，这篇文章主要是分析下在实际场景中使用时遇到的问题以及如何回避这些问题。
基本原理大同小异，这里主要介绍利用css border（当然还可以使用css3的旋转技术实现，由于兼容性问题这里不涉及了）。

css border实现

一个div或者元素的border并不是我们直观意义上的一条有高度的线，而是一个等高梯形或者三角形（宽高为0时），可以看一下效果：
div定义：

<div class="arrow1"></div>

css:

.arrow1{
  width: 0px;
  height:0px;
  border-width: 30px;
  border-style: solid;
  border-color: #007998 #47A447 #3C6AB9 #D2322D;
}

最终效果：
使用css实现全兼容浏览器的三角形
可以看到每一个方向的border都是一个三角形，那么我们只需把对应方向剩余其他方向的border设置为透明或者隐藏掉就可以得到任何方向的一个三角形了。如果我们想得到一个下拉图标，我们可以将border的左右和下边框改为透明，css改动如下：

.arrow1{
  width: 0px;
  height:0px;
  border-width: 30px;
  border-style: solid;
  border-color: #007998 transparent transparent transparent;
}

再看一下效果：
使用css实现全兼容浏览器的三角形
注：transparent 属性用来在 background 中将 background-color 选项设置为背景颜色透明

bingo!就是我们想要的效果，但是在ie6下杯具鸟！
使用css实现全兼容浏览器的三角形
长长的大黑框，让人无法直视，这是因为ie6不支持transparent 透明属性，这时候我们可以将对应区域的border的样式设置为dashed，dashed在边框宽度很大时，会隐藏掉。css修改如下：

  .arrow1{
    width: 0px;
    height:0px;
    border-width: 30px;
    border-style: solid;
    border-color: #007998 transparent transparent transparent;
  }

效果如下（ie6下查看）：
使用css实现全兼容浏览器的三角形
但是，到此仍没有结束，我们设置个阴影来查看下最终生成的效果：
使用css实现全兼容浏览器的三角形
即便是我们看到的已经生成一个我们需要的三角形，但是三角形的占用高度仍是原高度，这会导致在和其他元素使用时，造成上移的效果。此时，我们需要把下边框的高度设置为0：

  .arrow1{
    width: 0px;
    height:0px;
    border-width: 30px 30px 0;
    border-style: solid;
    border-color: #007998 transparent transparent transparent;
  }

再来看看效果：
使用css实现全兼容浏览器的三角形
似乎仍是不太友好，在使用时我们仍需要修改对应的颜色，能不能根据父元素设定的颜色，显示对应的颜色呢？我们需要把border-color修改下：

.arrow1{
  width: 0px;
  height:0px;
  line-height: 0px;
  border-width: 30px 30px 0;
  border-style: solid dashed dashed dashed;
  border-left-color: transparent;
  border-right-color: transparent;
}

效果（使用当前字体颜色）：
使用css实现全兼容浏览器的三角形

当然除了利用css border生成外，我们还可以使用特殊字符◇叠加定位来生成，也可以使用css3的旋转来生成（ie6下需要hack处理）。利用border是一种常用而且简单兼容的方式

标签：
css,全兼容,浏览器,三角形
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“使用css实现全兼容浏览器的三角形”

暂无使用css实现全兼容浏览器的三角形的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com