CSS3提供了一個非常簡單的方法來編寫菱形。我們可以使用transform: rotate()，同時縮放一個正方形，然后使它變為菱形。下面是一個示例代碼：

.diamond{
width: 50px;
height: 50px;
background-color: red;
transform: rotate(-45deg) scale(1, 1.5);
}

首先，我們定義了一個正方形元素（寬50px，高50px，背景為紅色），然后我們使用對元素進行旋轉 -45度，并在Y軸上伸展1.5倍，最終使其變為菱形。

現在，讓我們考慮將這個技術應用到一個多邊形，而不僅僅是一個簡單的矩形。我們可以通過擴展使用多個平行的矩形來創建一個多邊形，然后對每個矩形應用 rotate() 和 position 屬性來創建菱形。下面是一個示例代碼：

.diamond {
position: relative;
width: 30px;
height: 30px;
}
.diamond:before, .diamond:after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 15px solid transparent;
}
.diamond:before {
top: -15px;
left: 0;
border-top-color: black;
border-bottom-color: black;
}
.diamond:after {
bottom: -15px;
left: 0;
border-left-color: black;
border-right-color: black;
}

在上面的代碼中，我們使用了 :before 和 :after 偽元素來創建菱形。具體來說，我們在其中一個元素上面創建了一個向下的等邊三角形，而另一個元素則被設置為向上的等邊三角形，這樣兩個三角形在一起就組成了一個菱形。同時，在兩個三角形中間有一個定位元素針對我們想要的變化，使之成為一個創造性的多邊形。

以這種方式，我們可以輕松地創建各種形狀的菱形和多邊形。只需添加并定位適當數量的矩形就可以了，而不用改變我們的核心代碼。