html - How to use CSS calc() with an element's height

Question

I was studying ways to make a hexagon with just CSS, and found a solution that gives me regular hexagons based on the width:

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

However, the code works by generating new rectangles based on the parent element's width. I was searching for a way to calculate the width based on the parent's height.

Is there a way to use an element's height property instead of width for calc()? (I'm not looking into using vh since the nearest parent won't always be the viewport). I googled around and could not find an answer.

question from:https://stackoverflow.com/questions/33776171/how-to-use-css-calc-with-an-elements-height

Answer 1

I think you are trying to run script in a css syntax, which is NOT POSSIBLE.

calc() can do basic math operation with absolute values, it cannot find the height of an element and then perform math on it.