javascript - 六边形 CSS 宽度和高度 %

Question

是否可以创建一个属性设置为 % 而不是 px 的六边形？所以我可以在我的网站中创建一个宽度和高度为 100px 的 div 容器，设置为 100% 宽度和高度的六边形会占据整个 div？感谢您的任何回复! :)

.hexagon {
  position: relative;
  width: 70px; 
  height: 40.41px;
  background-color: #64C7CC;
  margin: 20.21px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 20.21px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 20.21px solid #64C7CC;
}

<div class="hexagon"></div>

编辑万一有人想要它做了一种非常草率的解决方案，您可以在其中更改容器的像素以更改六边形

.container {
	width: 90px;
	height: 90px;
}
.hexagon1 {
	position: relative;
	height: 30%;
	width: 30%;
	top: 15%;
	left: 10%;
	background: #76B4FF;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.hexagon2 {
	position: relative;
	height: 30%;
	width: 30%;
	top: 0%;
	left: 16%;
	background: #76B4FF;
}
.hexagon3 {
	position: relative;
	height: 30%;
	width: 30%;
	top: -15%;
	left: 10%;
	background: #76B4FF;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.hexagon4 {
	position: relative;
	height: 30%;
	width: 30%;
	top: -60%;
	left: 4%;
	background: #76B4FF;
}

<div class="container">
<div class="hexagon1">
</div>
<div class="hexagon2">
</div>
<div class="hexagon3">
</div>
<div class="hexagon4">
</div>
</div>

Answer 1

您可以使用 em 单位，因为 border 不能使用百分比。这样你只需要在一个地方指定六边形大小，使用 font-size:

#container {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.hexagon {
    font-size: 400px;
    position: relative;
    width: 0.86602540378em;
    height: 0.5em;
    background-color: #64C7CC;
    margin: 0.25em 0.0669872981em;
}
.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 0.43301270189em solid transparent;
    border-right: 0.43301270189em solid transparent;
}
.hexagon:before {
    bottom: 100%;
    border-bottom: 0.25em solid #64C7CC;
}
.hexagon:after {
    top: 100%;
    border-top: 0.25em solid #64C7CC;
}

<div id="container">
    <div class="hexagon"></div>
</div>

但这不是最理想的解决方案，因为它与容器大小无关。