Как использовать CSS calc() с высотой элемента

Я изучал способы создания шестиугольника только с CSS и нашел решение, которое дает мне правильные шестиугольники на основе ширины:

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}

Однако код работает, создавая новые прямоугольники на основе ширины родительского элемента. Я искал способ вычисления ширины на основе родительской высоты.

Можно ли использовать свойство высоты элемента вместо ширины для calc()? (Я не смотрю на использование vh, поскольку ближайший родительский элемент не всегда является окном просмотра). Я googled вокруг и не мог найти ответ.

Ответ 1

Я думаю, вы пытаетесь запустить script в синтаксисе css, который НЕ ВОЗМОЖЕН.

calc() может выполнять базовую математическую операцию с абсолютными значениями, он не может найти высоту элемента и затем выполнять математику на нем.

Если вы нашли решение, сообщите мне об этом. Это очень поможет.

Ура!!

Ответ 2

Как сказал @YAMAN, это невозможно, но у меня есть трюк, которым я могу поделиться с вами на тот случай, если он сработает и поможет вам.

top: calc(50% - 0.59em);

Чтобы проверить это, используя div с размером и текстом внутри, вы можете увеличить размер шрифта, вручную получить высоту и разделить его на 2, заменить 0.59em на это значение, и вы, вероятно, увидите, что они остаются на одном уровне. гарнизонная лавка

Обратите внимание, что я уже знаю, что это не на 100% точно, но это работает вполне прилично для нескольких сценариев, проверьте это для вас, может подойти для вашего случая или нет.

Ответ 3

Вы можете обойти проблему, используя посредника: переменные CSS, которые являются единственными данными, находящимися "вне" фигурных скобок.

Если родительская ширина также является динамической или зависит от другого значения, используйте другую переменную для этого. В качестве примера, чтобы вы могли увидеть синтаксис, он будет выглядеть примерно так:

:root {
  --hex-parent-height: 10px;
}

.hexagon.parent {
  /* ... */
  width: var(--hex-parent-height);
}

.hexagon {
      height: 100%;
      width: calc(100% * var(--hex-parent-height));
      display: inline-block;
    }

Переменные CSS имеют два типа областей действия: глобальные и локальные. Локальные переменные будут работать логически только в одном и том же селекторе, но глобальные переменные одинаковы во всех ваших CSS. Объявление одной или нескольких переменных глобально выполняется через корневой блок, как показано в примере кода.

Получить значение переменной, как вы можете видеть, так же просто, как использовать CSS-функцию var(), которая в случае, если вы не знаете, имеет очень хорошую резервную функцию.

Например, если вам нужно было --hex-parent-height установить --hex-parent-height и что-то пойдет не так, а --hex-parent-height, вы можете вставить значение по умолчанию, чтобы минимизировать повреждения, например: var(--hex-parent-height, 10px)