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。由于您是从20em缩小到10em（即大小的一半），因此缩放比例为0.5。因此，所有绝对单位（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>

我无法减小六角形元素的高度和宽度

1 个答案:

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