码迷,mamicode.com
首页 > Web开发 > 详细

用css画图标

时间:2016-10-21 19:47:29      阅读:543      评论:0      收藏:0      [点我收藏+]

标签:before   1.2   email   需要   相加   radius   密码   显示   user   

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-bottom-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. 回顾居中显示方法。

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: "";
    position: absolute;
    right: 0;
    left: 50%;
    top: .7em;
    margin-left: -.45em;
    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;
    right: 0;
    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;
    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;
}

用css画图标

标签:before   1.2   email   需要   相加   radius   密码   显示   user   

原文地址:http://www.cnblogs.com/xinjie-just/p/5978171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!