html - 用 CSS 和 HTML 制作的六边形菜单

Question

我尝试制作一个六边形菜单，看起来像这样。但我遇到了一些麻烦。

1. 保持响应。
2. 让它们包含文本。
3. 边界。

我已经编写了这段代码，但是当它包含文本或边框时效果不佳。

CSS

ol.even {
  position: relative;
  left: 5.45455rem;
}

ol.odd {
  position: relative;
  margin-bottom: -4.5%;
}

.hex {
  position: relative;
  margin: 1em auto;
  width: 6rem;
  height: 10.2rem;
  background: #1e2530;
  transform: rotate(-90deg);
  display: inline-block;
  list-style-type: none;
  margin-right: 4.61538rem;
  transition: all 150ms ease-in-out;
  z-index: 2;
}

.hex:before, .hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  z-index: -1;
}

.hex:before {
  transform: rotate(60deg);
}

.hex:after {
  transform: rotate(-60deg);
}

.hex:hover {
  background: #ea7432;
  cursor: pointer;
}

HTML

<ol class="odd">
    <li class='hex'></li>
    <li class='hex'></li>
    <li class='hex'></li>
    <li class='hex'></li>
</ol>  
<ol class="even">
    <li class='hex'></li>
    <li class='hex'></li>
    <li class='hex'></li>
</ol>

结果是这样的。但它不能包含文本或边框

要怎么做才能像第一张图片上的六边形菜单一样工作？

Answer 1

将六边形内容放在新元素中并应用以下 CSS 将其正确放置:

HTML

<ol class="odd">
  <li class="hex">
    <div class="hex-content">Welcome</div>
  </li>
  <li class="hex"></li>
  <li class="hex"></li>
  <li class="hex"></li>
</ol> 

CSS

 .hex .hex-content {
   position: absolute;
   top: 50%;
   left: 50%;

   transform: translate(-50%, -50%) rotate(90deg);

   color: white;
 }

对于边框，您可以使用实心细外阴影和深色粗边框来获得此效果。 Here你可以找到一个很好的起点。