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函数的参数进行调整。