html - 我无法减少六边形元素的高度和宽度

Question

我想减小六边形元素的大小，但我做不到。

.r-hex {
	overflow: hidden;
	display: inline-block;
	width: 20em;
	height: 17.32em;
	transform: rotate(-30deg) skewX(30deg);
	border-radius: 10px;
  margin-top: 2rem;
}

.r-hex *,
.r-hex *::before {
	display: block;
	overflow: hidden;
	width: inherit;
	height: inherit;
	border-radius: inherit;
}

.r-hex-inner,
.r-hex-inner-2 {
	transform: skewX(-30deg) rotate(60deg) skewX(30deg);
}

.r-hex-inner-2 {
	background: #2388ed;
	content: '';
}

.r-hex-inner-2::before {
	margin-top: -1.5em;
	width: 20em;
	height: 20em;
	transform: skewX(-30deg) rotate(-90deg);
	background: url(https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687);
	background-size: cover;
	text-align: center;
	content: '';
}

<div class="r-hex">
							<div class="r-hex-inner">
								<div class="r-hex-inner-2"></div>
							</div>
						</div>

当我更改 20em 宽度和高度时，我失去了形状的半径。

所以我的问题是如何在不损坏形状的情况下减小形状的大小？

Answer 1

根据我的评论，如果您想更改六边形的宽度，则代码片段中的所有 em 值都需要相应地缩放。假设您要将新宽度设置为 10em。这给你一个 0.5 的比例因子，因为你正在从 20em 缩小到 10em(即大小的一半)。因此，所有绝对单位(px、em 等)都需要按相同的系数进行缩放。

我在下面的代码中注释了所有缩放需要完成的地方。该线程中的另一个答案碰巧遗漏了一些单位，导致外观不正确。

.r-hex {
  overflow: hidden;
  display: inline-block;
  
  /* Originally 20em, scaled by 0.5x */
  width: 10em;
  
  /* Originally 17.32em, scaled by 0.5x */
  height: 8.66em;
  
  transform: rotate(-30deg) skewX(30deg);
  
  /* Originally 10px, scaled by 0.5x */
  border-radius: 5px;
  
  /* Originally 2rem, scaled by 0.5x */
  margin-top: 1rem;
}

.r-hex *,
.r-hex *::before {
  display: block;
  overflow: hidden;
  width: inherit;
  height: inherit;
  border-radius: inherit;
}

.r-hex-inner,
.r-hex-inner-2 {
  transform: skewX(-30deg) rotate(60deg) skewX(30deg);
}

.r-hex-inner-2 {
  background: #2388ed;
  content: '';
}

.r-hex-inner-2::before {
  /* Originally -1.5em, scaled by 0.5x */
  margin-top: -0.75em;
  
  /* Originally 20em, scaled by 0.5x */
  width: 10em;
  
  /* Originally 20em, scaled by 0.5x */
  height: 10em;
  
  transform: skewX(-30deg) rotate(-90deg);
  background: url(https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687);
  background-size: cover;
  text-align: center;
  content: '';
}

<div class="r-hex">
  <div class="r-hex-inner">
    <div class="r-hex-inner-2"></div>
  </div>
</div>

---

奖励:使用 CSS 自定义属性/变量为您执行所有计算

事实上，您也可以使用 JavaScript 完成所有这些计算:没有什么是不可能的。请注意，下面的示例使用了 CSS 自定义属性(也称为 CSS 变量)，目前只有常青浏览器支持它们(即不支持 IE11)。

诀窍是简单地将所有引用转换为依赖于 --scale CSS 变量的绝对单位，并将它们与 calc() 组合。通过更改这个单个 CSS 变量，您可以毫不费力地调整六边形的大小，而无需担心自己手动重新计算值:

document.querySelector('#scale').addEventListener('input', e => {
  // Get the scale and convert it to a number
  const scale = +e.target.value;
  
  const hexElements = document.querySelectorAll('.r-hex');
  hexElements.forEach(hexElement => {
    hexElement.style.setProperty('--scale', scale);
  });
});

.r-hex {
  /* This CSS property can be manipulated by JS */
  --scale: 1;
  
  overflow: hidden;
  display: inline-block;
  width: calc(20em * var(--scale));
  height: calc(17.32em * var(--scale));
  transform: rotate(-30deg) skewX(30deg);
  border-radius: calc(10px * var(--scale));
  margin-top: calc(2rem * var(--scale));
  transition: all .25s ease-in-out;
}

.r-hex *,
.r-hex *::before {
  display: block;
  overflow: hidden;
  width: inherit;
  height: inherit;
  border-radius: inherit;
}

.r-hex-inner,
.r-hex-inner-2 {
  transform: skewX(-30deg) rotate(60deg) skewX(30deg);
}

.r-hex-inner-2 {
  background: #2388ed;
  content: '';
}

.r-hex-inner-2::before {
  margin-top: calc(-1.5em * var(--scale));
  width: calc(20em * var(--scale));
  height: calc(20em * var(--scale));
  transform: skewX(-30deg) rotate(-90deg);
  background: url(https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687);
  background-size: cover;
  text-align: center;
  content: '';
  transition: all .25s ease-in-out;
}

<label>Scale: <input type="number" value="1" step="0.1" min="0.1" id="scale"/></label>

<br />

<div class="r-hex">
  <div class="r-hex-inner">
    <div class="r-hex-inner-2"></div>
  </div>
</div>