如何计算由箭头组成的六边形中的translateX

Question

我使用 html 和 css 创建了一个由六个箭头组成的六边形。

37%

中的

translate(37%, -25%)

是用穷举法推导出来的，并不精确。

我怎样才能正确计算出translateX数字？

我很高兴接受需要使用 JavaScript 或任何有用提示的答案。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  position: relative;
  width: 350px;
  aspect-ratio: 1;
}

.arrow {
  top: 50%;
  left: 50%;
  opacity: 0.3;
  background-color: navy;
  width: 55%;
  height: 48%;
  position: absolute;
  translate: -50% -100%;
  transform: rotate(calc(360deg / 6 * var(--i))) translate(37%, -25%);
  transform-origin: 50% 100%;
  clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);
}

<div class="container">
  <div class="arrow" style="--i: 0"></div>
  <div class="arrow" style="--i: 1"></div>
  <div class="arrow" style="--i: 2"></div>
  <div class="arrow" style="--i: 3"></div>
  <div class="arrow" style="--i: 4"></div>
  <div class="arrow" style="--i: 5"></div>
</div>

Answer 1

这是一种稍微不同的使用精确值和数学进行编码的方法。您所要做的就是更新一个变量。

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
}

.container {
  --h: 140px; /* control the size */
  
  height: calc(2.5*var(--h));
  aspect-ratio: 1/cos(30deg);
  display: grid;
  place-items: center;
  outline: 1px solid red;
}

.arrow {
  grid-area: 1/1;
  opacity: 0.3;
  background-color: navy;
  height: var(--h);
  aspect-ratio: 1;
  --_d:(1 - 2*cos(30deg))/sin(30deg);
  transform: 
    rotate(calc(60deg*var(--i))) 
    translate(calc(50%*cos(30deg)), calc(25%*(var(--_d) - 1)));
  clip-path: 
    polygon(0 0,
     calc(100% - var(--h)*tan(30deg)/2) 0,100% 50%, 
     calc(100% - var(--h)*tan(30deg)/2) 100%,0 100%, 
     calc(       var(--h)*tan(30deg)/2) 50%);
}

<div class="container">
  <div class="arrow" style="--i: 0"></div>
  <div class="arrow" style="--i: 1"></div>
  <div class="arrow" style="--i: 2"></div>
  <div class="arrow" style="--i: 3"></div>
  <div class="arrow" style="--i: 4"></div>
  <div class="arrow" style="--i: 5"></div>
</div>