CSS中菱形的繪制方法

在CSS中，我們可以使用transform屬性來繪制菱形，我們需要?jiǎng)?chuàng)建一個(gè)正方形，然后通過旋轉(zhuǎn)和縮放來形成菱形。

以下是一個(gè)簡單的示例代碼：

HTML:

<div class="square"></div>

CSS:

.square {
  width: 100px;
  height: 100px;
  background-color: #000;
  transform: rotate(45deg) scale(1, 1.414);
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)黑色的正方形，然后通過transform屬性將其旋轉(zhuǎn)45度，并沿Y軸縮放1.414倍，從而形成一個(gè)菱形，您可以根據(jù)需要調(diào)整width、height和transform屬性來繪制不同大小和形狀的菱形。

由于菱形的兩個(gè)對角線長度不同，因此我們需要使用不同的變換來繪制它們，在這種情況下，我們可以使用兩個(gè)div元素來分別繪制菱形的兩個(gè)對角線，每個(gè)div元素都可以使用不同的transform屬性來繪制所需的形狀。