Hexagon菜单用CSS和HTML制作

Question

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

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



我已经制作了这段代码，但是当它包含文本或边框时，它不能很好地工作。

CSS

public static Image read(File file) {
    try (FileInputStream fileStream = new FileInputStream(file)) {
        return new Image(fileStream);
    }

HTML

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;
}

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

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

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你可以找到一个非常好的起点。

Answer 2

我不知道这是否有帮助，但是，您可以查看我现在正在处理的六边形菜单构建器，您可以根据自己的意愿自定义代码。 EasyHex