使用CSS生成图标

helloworldcoding 发布于2019-08-29 11:18 / 3423人阅读

摘要：理解这一点让上边和下边也变成三角形就简单了，将元素的属性设为现在上下左右个边框都是三角形了。实例二制作快进按钮效果为了减少页面的元素，我们可以只提供一个元素实现第个三角形，然后借助的伪类实现第个三角形。

有一次笔者在参加前端面试的过程中被面试官问到这样一个问题： BootStrapt里面的图标是怎么样的？
用过Bootstrapt的开发者都知道，在Bootstrapt里面有一个图标组件，引用这个文件之后，就可以通过给元素添加类名来给元素添加相应的图标，并且这个图标还可以改变颜色和大小。那么它是怎么实现的呢？
大家首先想到的最通用的添加图标的方法就是以图片的形式添加，但是仔细想一想，图片能改变颜色吗？
大家再想想，字体可以改变颜色和大小。而且CSS3支持web字体，使得图标的变化更为丰富，于是就有人用字体制作了图标。但是，我们今天要讲的是功能更强的图标制作方案：用纯生html和css制作图标。

下面从最简单的实例开始教大家如何使用CSS制作icon
1.三角形图标
效果图：

详细讲解实现过程：
首先，实现长方形边框
HTML的块级元素都是长方形的，比如我们设定了以下样式：

这个长方形太单调了，再给它点颜色看看，咱们来个彩色边框吧。

请注意长方形的4个角，以左上角为例，它到底是属于左边框还是上边框呢？
左上角，既属于左边框，又属于上边框，角落的归属成了一个问题，浏览器为了不让边框打架，就让二位各分一半吧。于是乎左上角就被一分为二，变成了两个三角形，三角形靠近哪个边框，就显示那个边框的颜色。
三角形的实现
我们把上面这个彩色边框的矩形内容拿掉，看看会发生什么。

呜，cool！左边和右边都是三角形了耶！

为什么上边和下边还是梯形呢？这是因为块级元素默认会在页面上水平平铺。
理解这一点让上边和下边也变成三角形就简单了，将元素的width属性设为0：

现在上下左右4个边框都是三角形了。

如何制作成三角形呢？把三个边框设置成透明试一试！

2.下面是一个实现旗帜的效果：

根据以上知识，我们很自然地就能想到实现方法，将border-bottom的颜色设置为透明的。

/*CSS：*/
.flag {
width: 0;
height: 0;
border: 2rem solid #FF6600;
border-top-width: 4rem;
border-bottom-color: transparent;
border-bottom-width: 2rem;
}

实例二：制作快进按钮效果

为了减少页面的HTML元素，我们可以只提供一个元素实现第1个三角形，然后借助CSS3的伪类实现第2个三角形。
第1个三角形使用了相对定位，第2个三角形使用了绝对定位，使得第2个三角形能够紧挨着第1个三角形。

  /*CSS：*/
    .rds-arrow-wrapper {
    position: relative;
    width: 20em;
    text-align: center;
}
 
.rds-arrow,
.rds-arrow:after {
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-left: 2rem solid #eae;
    border-bottom: 1rem solid transparent;
    border-right: 2rem solid transparent;
}
 
.rds-arrow {
    margin-left: 1rem;
}
 
.rds-arrow:after {
    content: "";
    position: absolute;
    left: 100%;
    top: -1rem;
    bottom: 0;
}

需要注意的是，箭头方向是向右的，但在CSS里面是通过border-left的颜色来控制的。

经过以上两个例子，大家对制作图案的原理都有初步的了解了吧。下面的实例三将带领大家制作一个常用的icon图标，相信大家学习了之后，发散自己的思维，就可以制作出更多的图案。




    
    Home

好了，下面该是你设计出自己图案的时候了~

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111555.html

浅谈 CSS Sprites 雪碧图应用

摘要：编写配置文件，以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐，是因为非常的灵活，看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言网站开发90%会用到小图标，多小图标调用显示是前端开发常见的问题；目前小图标显示常见有两种方式...

MkkHou 2019-08-30 13:12 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
svgtofont.js 自动生成图标字体和彩色图标文件

摘要：使用说明图标字体只能被渲染成单色，不能生成彩色图标。自动生成预览网站，预览字体文件。创建最大输入图标宽度的等宽字体。输出的字体高度默认为最高输入图标的高度。自动生成样式和。一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。 ┌────────┐ ┌────────────...

objc94 2019-08-23 12:04 评论0 收藏0
svgtofont.js 自动生成图标字体和彩色图标文件

摘要：使用说明图标字体只能被渲染成单色，不能生成彩色图标。自动生成预览网站，预览字体文件。创建最大输入图标宽度的等宽字体。输出的字体高度默认为最高输入图标的高度。自动生成样式和。一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。 ┌────────┐ ┌────────────...

ranwu 2019-08-30 15:54 评论0 收藏0
CSS4:icon全解

摘要：全解法如何在文件里扣出图层里的图标右键选中这个图层右击这个图层把这个图层放到新文件点击图片的按钮自动切图到最小再调整一下画布大小将图片设置为长宽一样导出即可在页面里图片会默认保持比例所以只要设置宽高的其中一种就可以了抠图的前端现在基本没有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出图层里的图标右键选中这个图层showImg(https://segmentf...

LinkedME2016 2019-08-30 15:53 评论0 收藏0