给六边形div一个边框

Question

有什么方法可以给这个六边形形状一个边框吗？

六边形由顶部（三角形）

中间（矩形）和底部（三角形）三部分组成。

我

遇到了麻烦，因为为了制作六边形的顶部和底部三角形，我必须使用"边框：透明"。

CSS：

.hex-mid {
    width: 208px;
    height: 120px;
    background-color: #64C7CC;
}
.hex-top {
    width: 0;
    border-bottom: 60px solid #64C7CC;
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
}
.hex-bot {
    width: 0;
    border-top: 60px solid #64C7CC;
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
}

.HTML：

<ul class="hexagon">
  <li class="hex-top"></li>
  <li class="hex-mid"></li>
  <li class="hex-bot"></li>
</ul>

Answer 1

svg解决方案：

如果您使用 svg，您可以轻松做到这一点：

<svg width="240" height="300" viewBox="-1 -1 240 300">
  <path d="M104,0 L208,60 L208,180 L104,240 L0,180 L0,60z" stroke="black" stroke-width="1" fill="#64C7CC" />
</svg>

CSS解决方案：

您可以添加:before :p seudo元素并将它们放置在主元素后面。

.hex-mid {
  width: 208px;
  height: 120px;
  background-color: #64C7CC;
  position: relative;
}
.hex-mid:before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 122px;
  background-color: black;
  margin-left: -1px;
  margin-top: -1px;
}
.hex-top {
  width: 0;
  border-bottom: 60px solid #64C7CC;
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
  position: relative;
}
.hex-top:before {
  width: 0;
  content: '';
  position: absolute;
  border-bottom: 60px solid black;
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
  margin-left: -104px;
  margin-top: -1px;
  z-index: -1;
}
.hex-bot {
  width: 0;
  border-top: 60px solid #64C7CC;
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
}
.hex-bot:before {
  content: '';
  position: absolute;
  width: 0;
  border-top: 60px solid black;
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
  margin-left: -104px;
  margin-top: -59px;
  z-index: -1;
}
li {
  list-style: none;
}

<ul class="hexagon">
  <li class="hex-top"></li>
  <li class="hex-mid"></li>
  <li class="hex-bot"></li>
</ul>

Answer 2

使用 CSS 你可以

用

-webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0,1));

在上部和

-webkit-filter: drop-shadow(0px 2px 0px rgba(0, 0, 0,1));

在下三角形上。

然后，您可能需要分配

    z-index: 1;
    position:relative;

到您的中间部分以避免重叠。