重叠矩形和百分比

Question

无论如何创建一个Hexagon，其属性设置为％而不是px＆＃39; s？所以我可以在我的网站中创建一个宽度和高度为100px的div容器，六边形设置为100％宽度和高度将占用整个div？谢谢你的回复！：）

＆＃13;

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

＆＃13;

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

＆＃13;

修改的万一有人想要它做了一种非常草率的解决方案，你可以改变容器的像素来改变六边形

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用em个单位，因为border无法执行百分比。这样，您只需在一个位置指定六边形大小，font-size：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

然而，这不是最理想的解决方案，因为它与容器尺寸无关。

Answer 2

我想到了很多可能的解决方案，其中有两个：

重叠矩形和百分比

众所周知，六边形由6个等边三角形组成。但是，您也可以使用3个重叠的矩形来模拟六边形，这些矩形围绕其中心点旋转60度，但在其他方面相同。

这些矩形必须具有正确的比例，但它们很容易计算出来：

让d为六边形的直径，a为矩形的长边，b为短边，然后我们得到：

a = sqrt(3)/2 * d（约0.866）
b = 0.5 * d

使用该知识和a really nice trick to make the width of a div relative to its height，可以制定解决方案，您只需要更改单个值（父div的宽度）来更改大小你的六角形。

以下是代码：

＆＃13;

.wrapper {
  width: 270px; /* This is the only value you need to change */
}

.container {
  position: relative; 
  width: 100%;
  padding-bottom: 86.6%; /* This sets the height of the div to 86% of its width */
  border: 1px dashed green; /* Just for demonstration purposes*/
}

.hexagon {
  position: absolute; /* so .hexagon isn't pushed out of .container by the padding */
  left: 25%;
  width: 50%;
  height: 100%;
  margin: 0 auto; /* center .hexagon inside .container*/
  background-color: red; /* color of the hexagon */
}

.hexagon:before,
.hexagon:after {
  display: block;
  position:absolute; /* otherwise :after is below the hexagon */
  top:0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.hexagon:before {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.hexagon:after {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

＆＃13;

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

＆＃13;

一些小缺点

这个解决方案有一些非常小的缺点：

我添加了额外的标记.wrapper和.container。不幸的是，后者是不可避免的。如果您手动设置.wrapper的宽度和高度，可以避免使用.container，但是您只需更改一个值而不是两个值是不是很酷？
如果你想使用rgba()使用半透明的背景颜色，你实际得到的是一个较暗的小六边形，在更亮的六角形内部的较亮的星内。您可以通过.container opacity

旁注：与一位评论者所说的相反，我不担心浏览器对transform的支持：即使没有前瞻，它也远不是穷人，如果你使用前缀除非你必须支持IE8，否则无需担心。

Unicode方式

更有创意的解决方案之一（以及我最初发布的解决方案）是使用unicode六边形并调整字体大小。

然而，这种解决方案存在一些相当严重的问题：

您需要一种支持此功能的字体。显然，开箱即用的Windows没有实际支持此功能的字体。所以你需要使用Webfont。但是Google字体没有该字形的字体，Font Awesome或Glyphicons也没有字体。所以你自己托管了一个字体。
确定一个正确的位置要困难得多，这将包括大量的试验和错误，我认为即使你做对了，解决方案也会不稳定并且如果成本很高，如果你需要它才能做出回应。

所以也许这个解决方案将来可以使用，但是现在它只有一些学术价值，但是这里的代码是：

＆＃13;

.hexagon:before {
  content:'\2b22';
  color:#64c7cc;
  line-height:1;
}

.hex-sm {
  font-size:40px;
  height:40px;
  }
.hex-md {
  font-size:100px;
  height:100px;
  }
.hex-lg {
  font-size:200px;
  }

＆＃13;

<div class="hexagon hex-sm">
</div>
<div class="hexagon hex-md">
</div>
<div class="hexagon hex-lg">
</div>

＆＃13;

以下是unicode character 'BLACK HEXAGON' (U+2B22)的一些信息，如果您正在寻找支持它的字体，Code2000似乎就是您正在寻找的内容。< / p>

六角CSS宽度和宽度高度％

2 个答案:

重叠矩形和百分比

Unicode方式