时间戳

首页 > 解决方案 > 我如何将我的汉堡菜单变成 9 个点？

html - 我如何将我的汉堡菜单变成 9 个点？

问题描述

我目前正在制作谷歌主页，我需要制作一个便当菜单，换句话说就是一个 9 点菜单。

我尝试制作它的方法是首先制作汉堡菜单并添加text-decoration: dotted; 我认为这会使我的菜单中的字符串点缀，但事实并非如此。

.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>

标签： htmlcss

解决方案

例如，要实现看起来像“便当菜单”图标的东西，您可以尝试 css 网格。看看下面的内容。

.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>

但我强烈建议使用一个常见的 svg 图标，如果它只是用作图标。取决于你想用它做什么。

推荐阅读