CSS中的菱形可以通過偽元素來實現。首先，為父元素設置position為relative，然后為其添加一個:before偽元素，設置position為absolute。接著，設置偽元素的width和height為0，border-top、border-right、border-bottom和border-left的樣式為相同的尺寸（如20px）和顏色（如紅色），然后再將border-right寬度設為0。

.diamond {
position: relative;
width: 40px;
height: 40px;
}
.diamond:before {
position: absolute;
content: "";
top: 0;;
left: 0;
width: 0;
height: 0;
border-top: 20px solid red;
border-right: 0;
border-bottom: 20px solid red;
border-left: 20px solid red;
}

這段代碼可以生成一個大小為40px的菱形，其中20px為菱形邊長的一半。如果想要生成不同大小的菱形，只需要修改父元素的width和height即可。

另外，如果需要將菱形傾斜，可以使用transform: rotate(45deg)來實現。將偽元素的旋轉放在樣式表末尾，并加上z-index: -1來使菱形在父元素之后渲染。

.diamond:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 20px solid red;
border-right: 0;
border-bottom: 20px solid red;
border-left: 20px solid red;
z-index: -1;
transform: rotate(45deg);
}

這樣代碼可以生成一個既是菱形又是菱形的菱形，呈45度傾斜的效果。同樣地，傾斜的度數可以使用rotate函數的參數進行調整。