css制作菱形
使用 CSS 制作菱形
方法一：通过旋转正方形元素
创建一个正方形元素，通过 CSS 的 transform 属性旋转 45 度，使其呈现菱形效果。
.diamond {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}方法二：使用 CSS 的 clip-path 属性
clip-path 属性可以直接裁剪元素为菱形形状，无需旋转。
.diamond {
width: 100px;
height: 100px;
background-color: #e74c3c;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}方法三：通过伪元素实现
利用伪元素创建一个旋转后的正方形，适合需要内容不被旋转的场景。
.diamond-container {
width: 100px;
height: 100px;
position: relative;
}
.diamond-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2ecc71;
transform: rotate(45deg);
}方法四：使用边框和透明背景
通过设置边框和透明背景，利用边框的斜角特性模拟菱形。
.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #f39c12;
position: relative;
}
.diamond::after {
content: "";
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #f39c12;
}方法五：SVG 内联
直接使用 SVG 绘制菱形，适合需要复杂图形或动画的场景。
<svg width="100" height="100" viewBox="0 0 100 100">
<polygon points="50 0, 100 50, 50 100, 0 50" fill="#9b59b6"/>
</svg>注意事项
- 旋转元素（如方法一）会影响其内部内容的布局，可能需要额外调整。
clip-path（方法二）兼容性较好，但部分旧浏览器可能需要前缀。- 伪元素方法（方法三）适合需要保留内容方向的情况。
- 边框方法（方法四）适合纯装饰性元素，内容需另存。
