在前端開發中，我們經常會使用 CSS 來控制網頁的樣式和布局。其中，設置元素的高度和寬度是非常常見的操作。但是，有時候我們會遇到一個特殊的需求，就是讓元素的高度等于其寬度。這時，我們就可以使用一些特殊的 CSS 技巧來實現。

首先，我們可以使用下面這行代碼來讓元素的寬度和高度都等于 100 像素：

div {
width: 100px;
height: 100px;
}

但是，這并不能讓元素的寬度和高度相等。所以，我們需要進一步調整樣式。下面是幾種可以實現高度等于寬度的 CSS 技巧：

1. 使用 padding 百分比

div {
width: 100px;
padding-top: 100%;
}

上面的代碼會讓元素的頂部和底部的內邊距（padding）分別為 50 像素，從而讓元素的高度等于其寬度。

2. 使用偽元素

div {
width: 100px;
position: relative;
}
div::before {
content: "";
display: block;
padding-top: 100%;
}

上面的代碼會在 div 元素的前面插入一個偽元素，并且讓這個偽元素的高度等于 div 元素的寬度。需要注意的是，需要將 div 元素的 position 屬性設置為 relative，才能讓偽元素的定位以 div 元素為基準。

3. 使用 transform

div {
width: 100px;
height: 0;
position: relative;
}
div::before {
content: "";
display: block;
padding-top: 100%;
transform: translateY(-100%);
}

上面的代碼同樣是使用偽元素來實現高度等于寬度的效果。然而，這里使用了 transform 屬性的 translateY 函數來把偽元素上移，并讓它的高度等于 div 元素的寬度。

以上就是一些常用的讓元素高度等于寬度的 CSS 技巧。需要說明的是，這些方法并不是適用于所有情況的，具體使用還需要根據實際需求來選擇。同時，由于這些技巧可能會對元素的布局產生一定的影響，所以建議在使用前考慮清楚。