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.
5 Answers. Show activity on this post. 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.
Unfortunately, it is not possible to "get" the height of an element via CSS because CSS is not a language that returns any sort of data other than rules for the browser to adjust its styling. Your resolution can be achieved with jQuery, or alternatively, you can fake it with CSS3's transform:translateY(); rule.
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
You can use calc() anywhere where you would use numeric values (e.g.: width, max-height, margin-left, …) Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.
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.
You can circumvent the problem using an intermediary: CSS variables, which is the only data "outside" the curly brackets, as it were.
If the parent's width is also dynamic or dependant on other value, use another var for that. Just as an example so you can see the syntaxis, it'd look something like this:
: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 Variables have two types of scopes: global and local. Local vars will only work logically within the same selector, but global vars are the same through all your CSS. Declaring one or more variables globally is done through the root block, as shown in the code example.
Retrieving a var value as you can see is as easy as using the var() CSS function, which in case you don't know, has a very nice fallback feature.
For example, if you were to set --hex-parent-height
dynamically and something goes wrong and the var is left unset, you may insert a default value to minimize the damages, like so: var(--hex-parent-height, 10px)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With