我目前正在做谷歌主页，我需要做一个便当菜单与其他的话，一个9点菜单。
我尝试的方法是先做一份汉堡菜单，然后添加文字装饰:点； 我以为这会使我的菜单中的字符串点缀，但它没有。
null
.bento-string {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}<div class="bento-menu">
<div class="bento-string"></div>
<div class="bento-string"></div>
<div class="bento-string"></div>
</div>null
为了实现类似“便当菜单”图标的功能，您可以尝试使用css网格，例如。 看看下面的内容。
null
.bento-menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 2px;
grid-row-gap: 2px;
height : 22px;
width : 22px;
}
.bento-dot {
width : 6px;
height: 6px;
border-radius: 999px;
background:#000000;
overflow: hidden;
}<div class="bento-menu">
<div class="bento-dot"></div>
<div class="bento-dot"></div>
<div class="bento-dot"></div>
<div class="bento-dot"></div>
<div class="bento-dot"></div>
<div class="bento-dot"></div>
<div class="bento-dot"></div>
<div class="bento-dot"></div>
<div class="bento-dot"></div>
</div>