css三条杠图标

在现代网页设计中，三条杠图标常用于网站或应用的导航栏、菜单栏等位置，起到展开、折叠或更多选项等功能。下面我们来了解一下使用 CSS 实现三条杠图标的方法：

/* 普通三条杠图标 */

.menu-icon {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background-color: #000;
}
.menu-icon::before,
.menu-icon::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background-color: #000;
}
.menu-icon::before {
    transform: translateY(-7px);
}
.menu-icon::after {
    transform: translateY(5px);
} 

代码解释：

首先设置一个基本样式，即宽度为 20px，高度为 2px，黑色背景和上下居中的样式。接着使用伪元素 before 与 after 来分别生成上下两条杠，通过 translateY 属性将其上下偏移。

/* X 形三条杠图标 */

.menu-icon {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background-color: #000;
    position: relative;
}
.menu-icon::before,
.menu-icon::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
}
.menu-icon::before {
    transform: rotate(45deg);
}
.menu-icon::after {
    transform: rotate(-45deg);
} 

代码解释：

首先同样是设置基本样式，然后将三条杠元素设置为相对定位（为伪元素绝对定位做准备）。再对上下两个伪元素，分别使用 transform 属性将其旋转 45 度和 -45 度。

/* 圆形三条杠图标 */

.menu-icon {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background-color: #000;
    position: relative;
}
.menu-icon::before,
.menu-icon::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
}
.menu-icon::before {
    transform: translateY(-50%);
}
.menu-icon::after {
    transform: translateY(50%);
} 

代码解释：

同样的，先设置基本样式并将三条杠元素设置为相对定位。然后对上下两条伪元素设置为圆，即 border-radius 属性为 50%，使用 translateY 属性使其上下居中，完成后我们得到了一个可爱的小圆圈与三条杠组合的图标。