在当今时兴的的网址上,大家常常会见到一些小三角形的往下拉提醒(新浪微博顶端的下拉列表),简易的方法能够 应用一张图片替代,可是伴随着前端开发技术的发展趋势,及其开发人员针对前端开发特性的“挑毛病”,愈来愈多的前端工程师者刚开始“返朴归真”,在能不应用图片的情景中降低图片应用,css图标相对性于图片也有个优点是我们可以便捷的订制图标的尺寸及其色调。

css完成三角形图标已不是什么新鮮技术,以前也是有许多 有关的技术文章内容,本文主要是剖析下到具体情景中应用时碰到的难题及其怎样逃避这种难题。
基本概念如出一辙,这儿关键详细介绍运用css border(自然还能够应用css3的转动技术完成,因为兼容问题这儿不涉及到了)。

css border完成

一个div或是原素的border并并不是大家形象化实际意义上的一条有高度的线,只是一个等高线梯状或是三角形(高宽为0时),能够 看一下实际效果:
div界定:

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

css:

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

最后实际效果:
使用css实现全兼容浏览器的三角形 三角形 浏览器 全兼容 css CSS/HTML  第1张
能够 见到每一个方位的border全是一个三角形,那麼大家只需把相匹配方位剩下别的方位的border设定为全透明或是掩藏掉就可以获得一切方位的一个三角形了。如果我们想要一个往下拉图标,我们可以将border的上下和下外框改成全透明,css修改以下:

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

再看一下实际效果:
使用css实现全兼容浏览器的三角形 三角形 浏览器 全兼容 css CSS/HTML  第2张
注:transparent 特性用于在 background 里将 background-color 选择项设定为背景色全透明

bingo!便是大家要想的实际效果,可是在ie6下杯具鸟!
使用css实现全兼容浏览器的三角形 三角形 浏览器 全兼容 css CSS/HTML  第3张
细细长长大黑边,令人不忍直视,这是由于ie6不兼容transparent 全透明特性,此刻我们可以将相匹配地区的border的款式设定为dasheddashed在外框总宽非常大时,会掩藏掉。css改动以下:

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

实际效果以下(ie6下查询):
使用css实现全兼容浏览器的三角形 三角形 浏览器 全兼容 css CSS/HTML  第4张
可是,到此仍沒有完毕,大家设定个黑影来查询下最后转化成的实际效果:
使用css实现全兼容浏览器的三角形 三角形 浏览器 全兼容 css CSS/HTML  第5张
就算是大家见到的早已转化成一个大家必须的三角形,可是三角形的占有高度仍是原高度,这会造成 在和别的原素应用时,导致移位的实际效果。这时,大家必须把下外框的高度设定为0:

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

再讨论一下实际效果:
使用css实现全兼容浏览器的三角形 三角形 浏览器 全兼容 css CSS/HTML  第6张
好像仍不是太友善,在应用时大家仍必须改动相匹配的色调,能不能依据父原素设置的色调,显示信息相匹配的色调呢?大家必须把border-color改动下:

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

实际效果(应用当今字体样式):
使用css实现全兼容浏览器的三角形 三角形 浏览器 全兼容 css CSS/HTML  第7张

自然除开运用css border转化成外,大家还能够应用特殊符号◇累加精准定位来转化成,还可以应用css3的转动来转化成(ie6下必须hack解决)。运用border是一种常见并且简易适配的方法