CSS3中的transform屬性可以通過旋轉來制作菱形。

transform: rotate(45deg);

在制作菱形時，需要將元素的寬度和高度設為相等，且使用"transform-origin"屬性來調整旋轉軸心的位置，使元素以中心點為旋轉軸心。

.diamond {
width: 100px;
height: 100px;
transform: rotate(45deg);
transform-origin: center center;
}

如果制作的菱形需要有不同的顏色，則可以通過使用多個偽元素來實現。在偽元素中設置旋轉和顏色即可。

.diamond {
position: relative;
width: 100px;
height: 100px;
transform: rotate(45deg);
transform-origin: center center;
}
.diamond:before,
.diamond:after {
content: '';
position: absolute;
top: 0;
left: 0;
}
.diamond:before {
width: 100%;
height: 100%;
background-color: red;
transform: rotate(-45deg);
transform-origin: center center;
}
.diamond:after {
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(45deg);
transform-origin: center center;
}

以上代碼將在.diamond元素中創建兩個偽元素，它們都是100%的寬度和高度，并分別進行反向和正向旋轉。其中，偽元素before的顏色是紅色，偽元素after的顏色是藍色。