给六边形div一个边框[重复]答案

【问题标题】：Giving hexagon div a border [duplicate]给六边形div一个边框[重复]
【发布时间】：2014-12-04 17:27:01
【问题描述】：

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

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

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

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>

【问题讨论】：

参考这个答案：http://stackoverflow.com/questions/19418486/css3-hexagon-shape-with-a-border-outline

标签： css border css-shapes

【解决方案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 :pseudo-elements 并将它们放在主要元素的后面。

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

【讨论】：

【解决方案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;

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

【讨论】：

svg解决方案：

CSS 解决方案：

`svg`解决方案：