css写√的图标_用CSS来制作图标

想知道如何利用CSS来制作图标吗？并且只使用一个标签的情况下，不能使用伪元素哦！

在利用CSS制作图标时，经常用到border边框，所以，先看看边框的相关知识。

1.藏在border中的不能说的秘密

.box{

width:100px;

height:100px;

border-top:10px solid red;

border-right:10px solid blue;

border-bottom:10px solid yellow;

border-left:10px solid green;

}

复制代码

运行结果如下：

从运行结果可以看出，每个边框是个梯形，那么我们把宽度和高度都设置为0，会怎么样呐？

从上图中，可以看出，四个边框都变成了三角形，那么如果将左，右，下的边框都设置为透明(transparent)，那么就显示了一个下三角。

在使用边框的问题上，我们也遇到过一些问题，例如：

从上图可以发现，第二个菜单和第三个菜单的左边框不正确，其原因是，前一个元素的右边框和后一个元素的左边框叠加在了一起。想要解决这个问题，很简单，把后面两个元素的左边框去掉或者设置它们的margin-left为负值即可。

*{

margin:0;

padding:0;

}

li{

list-style:none;

}

ul li{

float:left;

width:100px;

height:35px;

line-height:35px;

text-align:center;

margin:100px auto;

border:4px solid #dedede;

}

ul li ~ li{

/*border-left:none;*/

margin-left:-4px;

}

• HTML
• CSS
• Javascript

复制代码

运行效果，如下所示：

2.一个和边框很像的属性outline

可以用它来绘制元素的轮廓，并且不占空间。

.box{

width:100px;

height:100px;

line-height:100px;

margin:100px auto;

text-align:center;

background:red;

outline:1px solid #dedede;

}

outline

复制代码

猜一猜，这个div的宽度和高度是多少呐？

使用outline属性可以很好的解决了，当鼠标移动到某元素上时，动态添加边框带来的抖动问题。

.box{

width:100px;

height:100px;

line-height:100px;

margin:100px auto;

text-align:center;

background:red;

}

.box:hover{

outline:4px solid #dedede;

}

outline

复制代码

运行结果如下：

值得注意的是，border-radius不会作用在outline上。

.box{

width:100px;

height:100px;

line-height:100px;

margin:100px auto;

text-align:center;

background-color:red;

outline:5px solid #dedede;

border-radius:20px;

}

outline

复制代码

运行结果如下：

如果想不占空间，还想使用border-radius怎么办呐？

.box{

width:100px;

height:100px;

line-height:100px;

text-align:center;

background-color:red;

border:10px solid #dedede;

border-radius:20px;

box-sizing:border-box;

}

复制代码

还可以利用box-shadow属性：

.box{

width:100px;

height:100px;

line-height:100px;

text-align:center;

background-color:red;

box-shadow:0 0 0 10px #dedede;

border-radius:10px;

margin:10px;

}

box-shadow

复制代码

运行结果如下：

box-shadow：x轴偏移 y轴偏移 阴影大小 边框大小 填充颜色，利用此属性，可以很好的模拟边框，还不占空间。

3.利用CSS制作图标

(1) 平行四边形图标

.box{

width:50px;

height:50px;

background:red;

transform:skew(-25deg);

margin-left:100px;

}

复制代码

运行结果如下：

(2) 暂停按钮

暂停按钮的原理是利用边框border，里面的方形用outline，再利用outline-offset属性可以用来设置偏移，并且是按照比例来的。

.box{

width:50px;

height:50px;

color:#000;

border:1px solid #000;

cursor:pointer;

border-radius:50%;

outline:10px solid #000;

outline-offset:-26px;

}

复制代码

运行结果如下：

如果将outline-offset再设置小一点，就出现了一个+号。

如果再修改一些属性和添加一些属性，就会出现如下的图标：

.box{

width:50px;

height:50px;

background-color:#000;

border:1px solid #000;

cursor:pointer;

border-radius:50%;

outline:10px solid #fff;

outline-offset:-35px;

transform:rotate(45deg);

}

复制代码

(3) 梯形图标

.box{

width:35px;

border:50px solid transparent;

border-bottom:50px solid red;

}

复制代码

运行结果如下：

(4) 鹰嘴图标

.box{

width:35px;

border-top:50px solid transparent;

border-right:22px solid #096;

border-bottom-right-radius:100%;

}

复制代码

运行结果如下：

(5) 左右箭头图标

.box{

width:0;

height:0;

border:10px solid transparent;

border-left:10px solid red;

-webkit-box-reflect: left 5px;

box-reflect:left 5px;

margin-left:100px;

}

复制代码

运行结果如下：

值得注意的是，box-reflect属性具有兼容性问题，只能在Chrome浏览器中打开。

(6) 下载图标

.box{

width:0;

color:blue;

border:8px solid transparent;

border-top:8px solid blue;

box-shadow:0 -12px 0 -4px;

}

复制代码

运行结果如下：