Demo 演示
代码实现
HTML
<!-- 三道杠 -->
<div class="icon-menu"></div>
<!-- 双层圆点 -->
<div class="icon-dot"></div>
CSS
body {
padding-top: 50px;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
}
/* 使用 content-box 盒子实现 */
.icon-menu {
width: 140px;
height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
}
/* 使用 border-style: double 实现 */
.icon-menu2 {
width: 140px;
height: 10px;
border-top: 30px double;
border-bottom: 10px solid;
}
.icon-dot {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
}
参考资料:
- 《CSS世界》