给六边形div一个边界

Question

有什么办法可以让这个六边形形状成为边框？

六边形由顶部（三角形）中间（矩形）和底部（三角形）三部分组成。

我遇到了麻烦，因为为了制作六边形的顶部和底部三角形，我必须使用“border：transparent”。

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：伪元素并将它们放在主要元素后面。

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

到中段以避免重叠。