纯CSS使div高度变成宽度的一半

前言

一直在找让当前盒子高度为宽度一半的方法，但是网上基本上都是js版本的，对于不想写js的人来说简直就是强迫症了，发士一定要找出用纯css的方法，于是有了这篇文章。

准备方法

css函数：

1. calc()
2. var()

代码

css

:root{
--my-width:200px;
--my-height:calc(var(--my-width) / 2)
}

div{
background:yellow;
width:var(--my-width);
height:var(--my-height)
}

html

<div>666</div>

注意事项

1、浏览器版本问题


2、calc
在运算符号 / ，+ ，- ，*等前后必须要有空格
3、var
自定义属性时前面必须加–
–my-width
且要在:root中写