文档章节

纯css实现全兼容三角形图标

缪斯的情人
 缪斯的情人
发布于 2014/05/29 17:23
字数 889
阅读 240
收藏 1

在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹毛求疵”,越来越多的前端开发者开始“返璞归真”,在能不使用图片的场景中减少图片使用,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;
}

最终效果:
![请输入图片描述][1]
可以看到每一个方向的border都是一个三角形,那么我们只需把对应方向剩余其他方向的border设置为透明或者隐藏掉就可以得到任何方向的一个三角形了。 ###css border实现
我们以一个下拉图标为示例,得到这样一个图标可以将border的左右和下边框改为透明,css改动如下:

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

再看一下效果:
![请输入图片描述][2]
注:transparent 属性用来在 background 中将 background-color 选项设置为背景颜色透明

###css兼容hack
bingo!就是我们想要的效果,但是在ie6下杯具鸟!
![请输入图片描述][3]
长长的大黑框,让人无法直视,这是因为ie6不支持transparent 透明属性,这时候我们可以将对应区域的border的样式设置为dasheddashed在边框宽度很大时,会隐藏掉。css修改如下:

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

效果如下(ie6下查看):
![请输入图片描述][4]
但是,到此仍没有结束,我们设置个阴影来查看下最终生成的效果:
![请输入图片描述][5]

###去除多余高度
即便是我们看到的已经生成一个我们需要的三角形,但是三角形的占用高度仍是原高度,这会导致在和其他元素使用时,造成上移的效果。此时,我们需要把下边框的高度设置为0:

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

再来看看效果:
![请输入图片描述][6]
###让定制更友好
似乎仍是不太友好,在使用时我们仍需要修改对应的颜色,能不能根据父元素设定的颜色,显示对应的颜色呢?我们需要把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;
}

效果(使用当前字体颜色):
![请输入图片描述][7]

当然除了利用css border生成外,我们还可以使用特殊字符◇叠加定位来生成,也可以使用css3的旋转来生成(ie6下需要hack处理)。利用border是一种常用而且简单兼容的方式 [1]: http://segmentfault.com/img/bVcmwe [2]: http://segmentfault.com/img/bVcmwm [3]: http://segmentfault.com/img/bVcmuI [4]: http://segmentfault.com/img/bVcmwm [5]: http://segmentfault.com/img/bVcmwo [6]: http://segmentfault.com/img/bVcmwp [7]: http://segmentfault.com/img/bVcmwt

© 著作权归作者所有

共有 人打赏支持
缪斯的情人

缪斯的情人

粉丝 624
博文 14
码字总数 10056
作品 2
济南
后端工程师
私信 提问
令人难以置信的纯 CSS3 图标

尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Loui...

古欣
2010/09/13
1K
6
CSS三角的写法(兼容IE6)

目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框。 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 7. 解决内联元素的三角显示问...

a1burning
2018/11/08
0
0
HTML5网站,前端开发框架--Dsure

官网:http://www.c945.com/d-s/dsure 简介: Dsure基于纯CSS的HTML5网站响应式开发框架,可用于国内/外网站开发,完美适用于Designers Site Program 全站静态系统 来历: Dsure参考了国内/外...

xizon
2014/11/21
2K
0
一步步打造自己的纯CSS单标签图标库

图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素...

深海鱼在掘金
2018/10/30
0
0
【基础】在css中绘制三角形及相关应用

简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适...

毛三十
2018/04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Navicat怎样导入Excel表格和txt文本的数据

Navicat怎样导入Excel表格和txt文本的数据 2018年07月02日 11:29:11 零碎de記憶 阅读数:2433 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39135287/ar...

linjin200
9分钟前
0
0
使用MaxCompute Java SDK运行安全相关命令

使用MaxCompute Console的同学,可能都使用过MaxCompute安全相关的命令。官方文档上有详细的MaxCompute 安全指南 ,并给出了安全相关语句汇总 。 简而言之, 权限管理 、 列级别访问控制 、 ...

阿里云云栖社区
14分钟前
0
0
中小公司的Java工程师应该如何逆袭冲进BAT?

(1)80% Java工程师都有的迷茫 这篇文章,跟大家聊一聊很多很多很多人问我的一个问题:中小公司的Java工程师应该如何规划准备,才能跳槽进入BAT这类一线互联网公司? 之所以我用了三个 “很...

Java填坑路
15分钟前
1
0
你的应用够安全吗?绿标2.0隐私权限详解

近日,最新一期的《绿色应用达标率调查报告》结果显示,应用在安全方面的通过率仅为57%,相较于其他四项标准通过率最低。其中隐私权限的过度获取是主要原因之一,需要开发者尽快完成整改。 ...

安卓绿色联盟
25分钟前
0
0
使用MaxCompute Java SDK运行安全相关命令

使用MaxCompute Console的同学,可能都使用过MaxCompute安全相关的命令。官方文档上有详细的MaxCompute安全指南,并给出了安全相关语句汇总。 简而言之,权限管理、列级别访问控制、项目空间...

阿里云官方博客
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部