CSS實現最大正方形的方法

在開發web頁面時，常常需要使用最大正方形的形式來呈現一些元素，比如圖片、圖標等。下面是實現最大正方形的幾種方法。
方法一：padding百分比法 
使用padding百分比來實現一個元素的高寬相等，從而達到最大正方形效果。 
div{
width: 100%;
padding-top: 100%; /* 高占父元素寬的100% */
background-color: #f00;
}
方法二：偽元素法 
使用CSS的偽元素before或after來創建一個正方形元素，并設置它的位置和樣式。 
div{
position: relative;
width: 50%; 
height: 0;
padding-bottom: 50%; /* 高占父元素寬的50% */
background-color: #f00;
}
div::before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; 
}
方法三：transform方法 
使用transform屬性來將一個長方形元素轉換成正方形。 
div{
width: 80%;
height: 50%;
background-color: #f00;
transform: rotate(45deg); /* 將長方形旋轉45度 */
transform-origin: center; /* 旋轉中心為元素中心 */
}