CSS如何做菱形布局

菱形布局是一種非常獨特的布局，它可以讓一個元素呈現菱形的形狀。在CSS中，我們可以使用transform屬性和旋轉函數來實現這種布局。

步驟如下：

1. 首先創建一個正方形的元素，并為其設置背景色：

.diamond {
width: 100px;
height: 100px;
background-color: #ccc;
}

2. 使用transform屬性將該元素旋轉45度：

.diamond {
transform: rotate(45deg);
}

3. 設置包裹該元素的容器的寬度和高度為該元素的對角線長度：

.diamond-container {
width: 141.42px; /* 對角線長度為100*sqrt(2) */
height: 141.42px;
}

4. 將該元素放入容器中心：

.diamond {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

最終的HTML和CSS代碼如下：

<div class="diamond-container">
<div class="diamond"></div>
</div>
.diamond {
width: 100px;
height: 100px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.diamond-container {
width: 141.42px;
height: 141.42px;
position: relative;
}

這樣，一個漂亮的菱形布局就完成了。