用css画图标

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;
}
时间： 2024-10-11 00:25:06

用css画图标的相关文章

用css控制一个DIV画图标。

在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样的效果了,而且还方便后期的维护.我们今天画四个图形,一个三角形,一个直角三角形,两种方法画多边框正方形,同心圆,分享图标. 三角形 首先,我们先画一个三角形 代码如下: 1 <div id="duo1"></div> 对 就是用一个DIV来画. 我们可以把这幅图补脑

Effective前端3：用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

Effective前端(3)用CSS画一个三角形

来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是

前些日子用css画的大白

闲来无事用css画的一个大白...其实有一些地方偷懒了用svg去画的,因为用纯几何形状组合去画变化那么复杂的曲线不太现实.但svg曲线坐标还是自己一点点调出来的,没有用工具生成. :ps:点击身体的某些地方可以交互,你能发现几个地方?

100多个纯CSS动画图标

我们在做页面开发的时候,可能要用到许多的小图标样式. 那么只要套用这个CSS的图标框架,在加上一些修饰,就可以得到非常棒的图标样式, 下面我们来看一下这些图标的样式. 图标样式图片 首先我们要引用写好的CSS文件,也就是框架 Icono.min.js 然后可以自己在样式上面做一些其他的修改,在我们这个图标展示当中, 加入了鼠标放上的样式. 改变了颜色 a:hover { color: #fff; } 透明度和大小 span:hover { transform: scale(1.5); } spa

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行

html+css画虚线，实线

html+css画虚线,实线 2014-07-18 09:21 4086人阅读 评论(0) 收藏 举报  分类: 其他(11)  html中加入虚线 Posted on 2011-11-23 15:57 Trible.H 阅读(11498) 评论(0) 编辑 收藏 html里添加虚线 <hr style="border:1px dashed #000; height:1px"> <hr style="border:1px dotted #036"

用CSS画英文字母

起因是在网上看到了有人用纯css画出了英文字母,感觉不难,了解过css3的话都会感觉思路比较直观 主要用到的css知识点:绝对定位,圆角属性以及元素的宽高均为零时边框的挤压性质 效果图 源代码 <!DOCTYPE html> <html> <head> <title>CSS-Letter</title> <meta charset="utf-8"/> <style type="text/css&qu

css 画 爱心

用css画爱心,虽然这样的方法会写很多的css代码,但是做成功之后,会有一种很满足的成就感. 爱心,可以有3个常规的几何图形形成,一个正方形加两个相同半径的圆或半圆.一个等腰三角形加两个圆,两个房型叠加,都行. 我的实现方法是选择最简单的一个正方形加两个相同半径的圆.首先创建一个类名为heart的div,然后为其固定宽度,高度,和背景颜色.接着通过伪类选择器:before和:after添加content:''; 规定其宽度和高度都为之前的div的高度,背景颜色与之前的div相同,通过一个大于高度