在CSS中，創建一個正方形是非常簡單的。只需要設置元素的高度和寬度相等即可。例如：

.square {
width: 100px;
height: 100px;
}

這將創建一個邊長為100像素的正方形。但有時候我們需要將正方形旋轉45度，使其成為一個“菱形”，同時保留原來的大小。如何實現呢？

我們可以使用CSS3中的transform屬性，它可以實現元素的旋轉、縮放、傾斜等效果。而針對對角變成菱形的需求，我們可以利用transform: rotate(45deg)屬性實現。例如：

.square {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}

這會將我們的正方形旋轉45度，并變成一個菱形。但是，如果我們想讓這個菱形保持原來的大小，該怎么辦呢？

實際上，想要讓旋轉后的菱形保持原來的大小，我們需要對元素的寬度和高度進行調整，使它們相等于正方形邊長的 √2 倍。例如：

.square {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
width: 141.4px;
height: 141.4px;
}

這樣就可以讓旋轉后的菱形保持原來的大小。通過這種方法，我們可以在CSS中輕松地創建出各種形狀的圖案。