css 画凌形 |表格样式 css 奇偶

/* 基础样式 */
.diamond {
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: blue;
position: relative;
margin: 50px auto 0;
}
/* 伪元素生成左半部分 */
.diamond::before {
content: "";
position: absolute;
top: -30px;
left: -30px;
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: blue;
transform: rotate(45deg);
}
/* 伪元素生成右半部分 */
.diamond::after {
content: "";
position: absolute;
top: -30px;
right: -30px;
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: blue;
transform: rotate(135deg);
}

上述CSS代码中，大家使用了border属性来制作菱形的四个角，以及border-bottom-color属性来指定菱形的颜色。

需要注意的是，由于菱形形状的特殊性，大家需要使用伪元素来生成菱形的左半部分和右半部分，然后使用transform属性来旋转它们，使它们与主体菱形相交形成完整的菱形。

最后，大家将菱形的宽度和高度都设置为0，并将它们的位置设置为相对定位。这样，大家就可以轻松地使用margin来定位菱形在页面上的位置。