Calc () sets the width equal to its height?

  css3, question

The code is as follows:

div{
 height: 50vw;
 width: -moz-calc(height);
 width: -webkit-calc(height);
 width: calc(height);
 background:#c7c7c7;
 }

Console output results

clipboard.png

Does calc () have this usage? If not, how do you make your width equal to your height?

calcHeight cannot be used directly inside. If the height and width are equal, there are the following three methods:

div{
 width:20vw;  /* 20% of Viewport */
 height:20vw;
 background-color:green;
 margin-bottom:20px;
 }

2.

div{
 width:20%;
 padding-top:20%;  /* padding relative to the width of the parent container as a comparison */
 background-color:yellow;
 margin-bottom:20px;
 }

3.

div{
 width: 20%;
 background-color:orange;
 }
 div:before{
 content:'';
 padding:50% 0;  /* padding is 20% relative to Width at this time;  */
 display:inline-block;
 }

Reference:
Demonstration