风格酷带您学习用css画图标
如遇下载链接蓝奏网盘打不开lanzous替换成lanzoux尝试! 广告
![](/linkpic/xianzhuifeng.jpg)
css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标。
这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形。
1. 我们要将该 div 的 width 和 height 都设置为 0,三角形是通过设置 border 来实现;
2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上、右、下、左、上左、上右、下右、下左,不规则的朝向可以通过旋转来实现);
3. 如果是上、右、下、左四种中的一种,将朝向的对面的 border-color 设置为我们需要的颜色,该朝向的这一边不设置 border,其它两边的 border-color 设置为 transparent;
4. 如果是上左、上右、下右、下左中的一种,以上右为例,设置相关的两边:上和右的 border-color 设置成我们想要的颜色,其它两边的 border-width 设置成 transparent。
5. border-width 的值就是底边长和高。
看几个例子:
例1:
图形:
该图形中,只有上方位有边,这个边就是三角形的底边了,底边长为 3.6em(左右相加),高为 2em。右、下、左没有边。于是 border-top-color: #000; | border-right-color: transparent; | border-left-color: transparent; | border-top-width: 2em; | border-right-width: 1.8em; | border-left-width: 1.8em;
.bottom {
width: 0;
height: 0;
border-top: 2em solid #000;
border-right: 1.8em solid transparent;
border-left: 1.8em solid transparent;
}
例2:
该图形中,左和下上方位有边,朝向为下左,底边长为 2em(左右相加),左边长为 4em(上下相加)。
.bottomLeft {
width: 0;
height: 0;
border-width: 2em 1em;
border-style: solid;
border-color: transparent transparent #000 #000;
}
例3:
该图形中,它的朝向并不是上面提到的那八种,实际上它可以通过例 2 顺时针旋转 60° 得到。
复制代码
.bottomLeftRotate {
width: 0;
height: 0;
border-width: 2em 1em;
border-style: solid;
border-color: transparent transparent #000 #000;
transform: rotate(60deg);
}
好了,进入正题,用 css 画一些常见的图标,目的有五个:1. 熟悉三角形的画法;2. 熟悉 transform 的使用;3. 回顾数学角度计算;4. 回顾定位布局方法;5. 回顾居中显示方法。
所有的 dom 都基于一个 div,比如下面领先个实例“向上”:
<div class=”top”></div>
第二个实例“向右”:
<div class=”right”></div>
1. 向上
复制代码
.top {
box-sizing: border-box;
position: relative;
width: 0;
height: 0;
border-right: .9em solid transparent;
border-bottom: .9em solid #000;
border-left: .9em solid transparent;
}
.top:after {
content: “”; /*针对before,after必须加上*/
position: absolute;
left: 50%;
top: .7em;
margin-left: -.45em; /*宽度的一半,结合 left: 50%; 使用*/
width: .9em;
height: 1.3em;
background-color: #000;
}
2. 向右
复制代码
.right {
box-sizing: border-box;
position: relative;
width: 1.3em;
height: .9em;
background-color: #000;
}
.right:after {
content: “”;
position: absolute;
top: 50%;
left: 1.1em;
margin-top: -.9em;
width: 0;
height: 0;
border-top: .9em solid transparent;
border-bottom: .9em solid transparent;
border-left: .9em solid #000;
}
3. 向下
复制代码
.bottom {
box-sizing: border-box;
position: relative;
width: .9em;
height: 1.3em;
background-color: #000;
}
.bottom:after {
content: “”;
position: absolute;
left: 50%;
top: 1.1em;
margin-left: -.9em;
width: 0;
height: 0;
border-right: .9em solid transparent;
border-top: .9em solid #000;
border-left: .9em solid transparent;
}
4. 向左
复制代码
.left {
box-sizing: border-box;
position: relative;
width: 0;
height: 0;
border-top: .9em solid transparent;
border-right: .9em solid #000;
border-bottom: .9em solid transparent;
}
.left:after {
content: “”;
position: absolute;
top: 0;
bottom: 0; /*在绝对定位中,top: 0; bottom: 0; margin: auto; 结合使用能竖直居中*/
left: .7em;
margin: auto;
width: 1.3em;
height: .9em;
background-color: #000;
}
以上四个图标由三角形和长方形拼贴而成。
5. 正确
复制代码
.true {
position: relative;
width: 1.2em;
height: .3em;
background-color: #000;
transform: rotate(60deg);
transform-origin: right center;
border-radius: .15em;
}
.true:after {
content: “”;
position: absolute;
top: .1em;
left: -.85em;
width: 2em;
height: .3em;
background-color: #000;
transform: rotate(60deg);
transform-origin: right center;
border-radius: .15em;
}
将 transform-origin 设置为 right center; 是为了好计算相对于它做绝对定位的 after 伪元素的位置。其实根据计算 .true:after 的 top: .15em; left: -.8em; 设置成上面的 top: .1em; left: -.85em; 能让两根线的连接处拼贴得更好。
6. 错误
复制代码
.false {
position: relative;
width: 2em;
height: .3em;
background-color: #000;
transform: rotate(45deg);
border-radius: .15em;
}
.false:after {
content: “”;
position: absolute;
width: 2em;
height: .3em;
background-color: #000;
transform: rotate(90deg);
border-radius: .15em;
}
transform-origin 的值默认为 center center 0; 因此只需旋转 90deg 即可。旋转也是相对于相对定位的元素,所以这里只需要在原基础上旋转 90deg。
7. 菜单
复制代码
.menu {
box-sizing: border-box;
position: relative;
width: 2em;
height: 2em;
background-color: #000;
border-radius: .3em;
}
.menu:before {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1.2em;
height: .15em;
background-color: #fff;
}
.menu:after {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1.2em;
height: .9em;
border-width: .15em;
border-style: solid none;
border-color: #fff;
}
8. 菜单2
复制代码
.menu2 {
box-sizing: border-box;
position: relative;
width: .5em;
height: .5em;
background-color: #000;
border-radius: 50%;
cursor: pointer;
}
.menu2:before {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
left: -.75em;
width: .5em;
height: .5em;
background-color: #000;
border-radius: 50%;
}
.menu2:after {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
left: .75em;
width: .5em;
height: .5em;
background-color: #000;
border-radius: 50%;
}
9. 下载
复制代码
.download {
box-sizing: border-box;
position: relative;
width: 2em;
height: .8em;
border-width: .3em;
border-style: none solid solid;
border-color: #000;
}
.download:before {
content: “”;
position: absolute;
right: 0;
bottom: .7em;
left: 0;
margin: auto;
width: .3em;
height: 1em;
background-color: #000;
}
.download:after {
content: “”;
position: absolute;
right: 0;
bottom: .2em;
left: 0;
margin: auto;
width: 0;
height: 0;
border-right: .6em solid transparent;
border-top: .6em solid #000;
border-left: .6em solid transparent;
}
箭头下面的“框”,设置 border-top-style:none; 而不是设置 border-top-color: transparent; 这样做就能实现,应该与上边框连接处的线那里不会出现线条变细的情况,如下:
这里只是将 border-style 和 border-color 的值换成了 solid 和 transparent #000 #000.
10. 上传
复制代码
.upload {
box-sizing: border-box;
position: relative;
width: 2em;
height: .8em;
border-width: .3em;
border-style: none solid solid;
border-color: #000;
}
.upload:before {
content: “”;
position: absolute;
right: 0;
bottom: .2em;
left: 0;
margin: auto;
width: .3em;
height: 1em;
background-color: #000;
}
.upload:after {
content: “”;
position: absolute;
right: 0;
bottom: 1.1em;
left: 0;
margin: auto;
width: 0;
height: 0;
border-right: .6em solid transparent;
border-bottom: .6em solid #000;
border-left: .6em solid transparent;
}
11. 视频
复制代码
.video {
box-sizing: border-box;
position: relative;
width: 1.5em;
height: 1.2em;
background-color: #000;
border-radius: .3em;
}
.video:after {
content: “”;
position: absolute;
top: 50%;
left: 1.4em;
margin-top: -.7em;
width: 0;
height: 0;
border-top: .7em solid transparent;
border-right: .6em solid #000;
border-bottom: .7em solid transparent;
}
12. 语音
复制代码
.voice {
box-sizing: border-box;
position: relative;
width: 1.4em;
height: 1em;
border-width: .2em;
border-style: none none solid;
border-color: #000;
border-radius: 50%;
}
.voice:before {
content: “”;
position: absolute;
right: 0;
left: 0;
bottom: .05em;
margin: auto;
width: .8em;
height: 1.3em;
background-color: #000;
border-radius: .4em;
}
.voice:after {
content: “”;
position: absolute;
right: 0;
bottom: -.6em;
left: 0;
margin: auto;
width: 0;
height: 0;
border-right: .6em solid transparent;
border-bottom: .4em solid #000;
border-left: .6em solid transparent;
}
13. 播放
复制代码
.play {
box-sizing: border-box;
position: relative;
width: 2em;
height: 2em;
border: .2em solid #000;
border-radius: 50%;
}
.play:after {
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.3em; /*没有让其左右居中,因为看起来右边更空一些*/
width: 0;
height: 0;
border-top: .6em solid transparent;
border-bottom: .6em solid transparent;
border-left: .9em solid #000;
}
14. 暂停
复制代码
.pause {
box-sizing: border-box;
position: relative;
width: 2em;
height: 2em;
border: .2em solid #000;
border-radius: 50%;
}
.pause:before {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.35em;
width: .2em;
height: .9em;
background-color: #000;
}
.pause:after {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: .15em;
width: .2em;
height: .9em;
background-color: #000;
}
15. 上一首(集)
复制代码
.previous {
box-sizing: border-box;
position: relative;
width: 2em;
height: 2em;
border: .2em solid #000;
border-radius: 50%;
}
.previous:before {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.65em;
width: 0;
height: 0;
border-top: .45em solid transparent;
border-bottom: .45em solid transparent;
border-right: .6em solid #000;
}
.previous:after {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.2em;
width: 0;
height: 0;
border-top: .45em solid transparent;
border-bottom: .45em solid transparent;
border-right: .6em solid #000;
}
16. 下一首(集)
复制代码
.next {
box-sizing: border-box;
position: relative;
width: 2em;
height: 2em;
border: .2em solid #000;
border-radius: 50%;
}
.next:before {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: -.4em;
width: 0;
height: 0;
border-top: .45em solid transparent;
border-bottom: .45em solid transparent;
border-left: .6em solid #000;
}
.next:after {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-top: auto;
margin-bottom: auto;
margin-left: .05em;
width: 0;
height: 0;
border-top: .45em solid transparent;
border-bottom: .45em solid transparent;
border-left: .6em solid #000;
}
17. 停止
复制代码
.stop {
box-sizing: border-box;
position: relative;
width: 2em;
height: 2em;
border: .2em solid #000;
border-radius: 50%;
}
.stop:after {
box-sizing: border-box;
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: .9em;
height: .9em;
background-color: #000;
}
18. 当前位置
复制代码
.position {
position: relative;
width: .6em;
height: .6em;
border: .4em solid #000;
border-radius: 50%;
}
.position:after {
content: “”;
position: absolute;
top: .55em;
left: -.4em;
width: 0;
height: 0;
border-top: 1em solid #000;
border-right: .7em solid transparent;
border-left: .7em solid transparent;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
勉强看起来像,中间的圆,不圆了。
19. pc
复制代码
.pc {
box-sizing: border-box;
position: relative;
width: 2em;
height: 1.4em;
border-width: .2em .2em .3em;
border-style: solid;
border-color: #000;
border-radius: .2em;
background-color: #efefef;
}
.pc:before {
content: “”;
position: absolute;
top: 1.2em;
right: 0;
left: 0;
margin: auto;
width: .6em;
height: .4em;
background-color: #000;
}
.pc:after {
content: “”;
position: absolute;
top: 1.6em;
right: 0;
left: 0;
margin: auto;
width: 1.6em;
height: .2em;
background-color: #000;
}
20. phone
复制代码
.phone {
box-sizing: border-box;
position: relative;
width: 1.4em;
height: 2em;
background-color: #efefef;
border-width: .3em .2em .5em;
border-style: solid;
border-color: #000;
border-radius: .15em;
}
.phone:after {
content: “”;
position: absolute;
right: 0;
bottom: -.4em;
left: 0;
margin: auto;
width: .5em;
height: .3em;
background-color: #fff;
border-radius: .3em;
}
21. 搜索
复制代码
.search {
box-sizing: border-box;
position: relative;
width: 1em;
height: .3em;
background-color: #000;
border-top-right-radius: .15em;
border-bottom-right-radius: .15em;
transform: rotate(40deg);
transform-origin: right center;
}
.search:before {
content: “”;
position: absolute;
left: -1.3em;
bottom: -.6em;
width: 1em;
height: 1em;
border: .3em solid #000;
border-radius: 50%;
}
22. 五角星
复制代码
.star {
box-sizing: border-box;
position: relative;
width: 0;
height: 0;
border-top: .7em solid #000;
border-right: 1em solid transparent;
border-left: 1em solid transparent;
}
.star:before {
content: “”;
position: absolute;
top: -.7em;
left: -1em;
width: 0;
height: 0;
border-top: .7em solid #000;
border-right: 1em solid transparent;
border-left: 1em solid transparent;
transform: rotate(72deg);
}
.star:after {
content: “”;
position: absolute;
top: -.7em;
left: -1em;
width: 0;
height: 0;
border-top: .7em solid #000;
border-right: 1em solid transparent;
border-left: 1em solid transparent;
transform: rotate(-72deg);
}
根据多边形的内角和公式可知 360*(5-2) / 5 = 72°。剩下的调整一下位置就好了。这个五角星由三个三角形拼贴而成。
23. 电子邮件
复制代码
.email {
box-sizing: border-box;
position: relative;
width: 0;
height: 0;
border-width: .7em 1em;
border-style: solid;
border-color: transparent transparent #000 #000;
}
.email:before {
content: “”;
position: absolute;
top: -.7em;
left: 1em;
transform: rotateY(180deg);
transform-origin: left center;
width: 0;
height: 0;
border-width: .7em 1em;
border-style: solid;
border-color: transparent transparent #000 #000;
}
.email:after {
content: “”;
position: absolute;
top: -.7em;
left: 50%;
margin-left: -.9em;
width: 0;
height: 0;
border-top: .6em solid #000;
border-right: .9em solid transparent;
border-left: .9em solid transparent;
}
24. 眼睛
复制代码
.eye {
box-sizing: border-box;
position: relative;
width: 2em;
height: 1.2em;
background-color: #000;
border-radius: 50%;
}
.eye:before {
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: .8em;
height: .8em;
background-color: #fff;
border-radius: 50%;
}
.eye:after {
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: .4em;
height: .4em;
background-color: #000;
border-radius: 50%;
}
25. 未锁
复制代码
.unlock {
box-sizing: border-box;
position: relative;
width: 1.6em;
height: 1.4em;
background-color: #000;
border-radius: .2em;
}
.unlock:before {
box-sizing: border-box;
content: “”;
position: absolute;
top: -.4em;
right: -.4em;
width: 1em;
height: .6em;
border-width: .2em;
border-style: solid solid none;
border-color: #000;
border-radius: .5em;
}
.unlock:after {
box-sizing: border-box;
content: “”;
position: absolute;
bottom: .2em;
left: 50%;
margin-left: -.15em;
width: .3em;
height: .5em;
border-top-left-radius: .25em;
border-top-right-radius: .25em;
background-color: #fff;
}
这里 .unlock:before 设置了 border-radius: .5em; 所以导致 被打开的锁下边框位置的部分看起来很细。
26. 杯子
复制代码
.cup {
box-sizing: border-box;
position: relative;
width: 1.3em;
height: 2em;
border-width: .2em .2em 1.2em;
border-style: solid;
border-color: #000;
background-color: #efefef;
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.cup:before {
box-sizing: border-box;
content: “”;
position: absolute;
top: .1em;
left: -.7em;
width: .7em;
height: 1.4em;
border-width: .2em;
border-style: solid;
border-color: #000;
border-top-left-radius: .3em;
border-bottom-left-radius: .3em;
}
27. 心
复制代码
.heart {
position: relative;
width: 1.4em;
height: 2em;
background-color: #000;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
transform: rotate(-45deg);
transform-origin: center bottom;
}
.heart:after {
content: “”;
position: absolute;
top: -.7em;
left: -.7em;
width: 1.4em;
height: 2em;
background-color: #000;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
transform: rotate(90deg);
transform-origin: center bottom;
}
该爱心由两个柱子一样的东西拼贴而成,很粗鲁,所以它是是黑色。
28. 主页
复制代码
.home {
box-sizing: border-box;
position: relative;
width: 1.4em;
height: 1em;
background-color: #000;
}
.home:before {
content: “”;
position: absolute;
top: -.7em;
left: 50%;
margin-left: -1em;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: .8em solid #000;
}
.home:after {
z-index: 2;
content: “”;
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: .3em;
height: .5em;
background-color: #fff;
}
29. 密码
复制代码
.password {
box-sizing: border-box;
position: relative;
width: 1.8em;
height: 1.4em;
background-color: #000;
border-radius: .2em;
}
.password:before {
box-sizing: border-box;
content: “”;
position: absolute;
top: -.6em;
left: 50%;
margin-left: -.5em;
width: 1em;
height: 1em;
border: .2em solid #000;
border-radius: 50%;
}
.password:after {
box-sizing: border-box;
content: “”;
position: absolute;
bottom: .2em;
left: 50%;
margin-left: -.15em;
width: .3em;
height: .5em;
border-top-left-radius: .25em;
border-top-right-radius: .25em;
background-color: #fff;
}
30. 用户(账号)
复制代码
.user {
box-sizing: border-box;
position: relative;
width: .9em;
height: .9em;
background-color: #000;
border-radius: 50%;
}
.user:after {
content: “”;
position: absolute;
top: 1em;
left: 50%;
margin-left: -.9em;
width: 1.8em;
height: 1em;
background-color: #000;
border-top-left-radius: .9em;
border-top-right-radius: .9em;
}
更新:(2017-06-27)
对于菜单的图标,可以不使用生成内容 content 属性及伪元素 before 和 after 。如下面的图标:
可以通过一段很简短的 css 实现:
复制代码
#menu {
color: #000;
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
border-top: 10px solid; /*没有设置颜色值,将同文本颜色一样*/
border-bottom: 10px solid;
padding-top: 10px;
padding-bottom: 10px;
background-color: currentColor; /*颜色关键字,将同文本颜色一致*/
background-clip: content-box; /*背景将绘制在内容方框内*/
}
上面的代码可以更简短一些,比如不设置 box-sizing 和 height 属性,结果是一样的,三条短横线的高度和它们之间的间距一样均为 10px ,要是在 less 预处理器中可这样写:
复制代码
#menu {
@size: 10px;
color: #000;
displsy: block;
width: @size * 5;
height: @size * 5;
border-top: @size solid;
border-bottom: @size solid;
padding-top: @size;
padding-bottom: @size;
background-color: currentColor;
background-clip: content-box;
}
如果需要整体调整图标的大小,改变 @size 变量的值就行了。如果宽度需要稍微宽点,将乘号 “*” 后面的数值变大就行了。
更新:(2019-08-27)
在绘制边框的时候,有一个 border-style 的值为 double 的边框属性,可以据此制作出形如轨道的效果
受这个效果的启发,同样可以仅通过边框就制作出一个菜单图标
<div class=”double”></div>
.double {
width: 50px;
height: 7px;
border-top: 21px double #000;
border-bottom: 7px solid #000;
}
NOTICE:【咨询风格酷】客服微信:wwwxmamnet
NOTICE:【风格酷模板网②群】QQ群:288678775
☉免责声明:本站所有模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服,我们核实后会立即删除。
☉如果源码网盘地址失效!或有其他问题,请点我报错,谢谢合作!
☉人民币与积分汇率为1比10,即1元=10积分.有任何疑问请联系客服!
☉如有其他问题,请加网站客服QQ(1131734965)进行交流。
☉本站提供的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
☉源码、模板等资源会随着技术、环境的升级而存在部分问题,还请慎重选择。