六边形 div 周围的边框

Question

我正在尝试在六边形 div 周围放置边框，或者更准确地说是 3 个 div 的六边形可见区域。我已经尝试了一些不同的方法来创建一个与 div 的可见性有关的边框。我在下面的例子中是最接近的，但仍然显示应该隐藏的 div 溢出。

我在这里或在 git 上找到了创建六边形形状的代码，不记得具体在哪里。所以这不是我的创作。

.hexagon {
    overflow: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);

}
.hexagon-in2 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.hexagon {
    width:  200px;
    height: 300px;
}

#hex1_bg{ background-color: rgb(181,144,223) }

.hexagon, .hexagon-in1, .hexagon-in2{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 5px solid gold;
    border-right: 5px solid gold;
}

<div class="hexagon" id="hex1">
	<div class="hexagon-in1">
		<div class="hexagon-in2" id="hex1_bg">
		</div>
	</div>
</div>

更新：

对建议的解决方案的外观不满意，它确实解决了边框问题，但给我带来了另一个问题，当鼠标悬停在六边形周围的空白区域时指针已经发生变化

我通过添加 3 个额外的 div 和许多额外的 css 得到了我想要的，但仍然不满意所以希望有人有任何建议。

代码显示了我想要创建的内容，但最好使用更少的代码。

.hexagon {
    position: relative;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}
.hexagon-in1 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.hexagon-in2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.hexagon {
    width:  200px;
    height: 300px;
}

#hex1_bg{ background-color: rgb(181,144,223) }

.bordergon{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 2px solid red;
    border-right: 2px solid red;
}
.bordergon-in1{
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 2px solid red;
    border-right: 2px solid red;
}
.bordergon-in2{
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    transform: rotate(-120deg);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

<div class="hexagon" id="hex1">
	<div class="hexagon-in1">
		<div class="hexagon-in2" id="hex1_bg">
            <div class="bordergon"></div>
            <div class="bordergon-in1"></div>
            <div class="bordergon-in2"></div>
		</div>
	</div>
</div>

Answer 1

我想我有一个解决办法。有相当多的 CSS，但它只使用两个 div。您在六边形中有一个六边形，并使用外面的一个作为边框。

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
    margin-top: 25px;
}

#hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}

#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

#hexagonIn {
    width: 95%;
    height: 95%;
    background: blue;
    position: relative;
    margin: auto;
    margin-top: 25px;
}

#hexagonIn:before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 47px solid transparent;
    border-right: 47px solid transparent;
    border-bottom: 23px solid blue;
}

#hexagonIn:after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 47px solid transparent;
    border-right: 47px solid transparent;
    border-top: 24px solid blue;
    z-index: 1;
}

还有 HTML：

<div id="hexagon">
    <div id="hexagonIn"></div>
</div>

如果您不介意的话，实际上可以缩短很多 CSS。它相当短，而且 CSS 相当干净。

同样在未来，我建议你使用无前缀。这是一个 JS 脚本，它会自动将浏览器前缀添加到您的 CSS 中，这意味着您可以添加

transform: rotate(-60deg);

它会添加 -moz-、-webkit-、-ms- 和 -o-。

希望这对你有用..