css制作菱形
使用CSS制作菱形
方法一：使用transform旋转正方形
通过创建一个正方形元素并旋转45度实现菱形效果。
.diamond {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}方法二：使用clip-path裁剪路径
通过clip-path直接裁剪出菱形形状，支持更复杂的路径调整。
.diamond {
width: 100px;
height: 100px;
background-color: #e74c3c;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}方法三：使用伪元素和边框
通过伪元素和透明边框生成菱形，适合需要边框效果的场景。
.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #2ecc71;
position: relative;
}
.diamond::after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #2ecc71;
}方法四：使用CSS渐变背景
通过线性渐变模拟菱形图案，适合背景装饰。
.diamond-bg {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #9b59b6 25%, transparent 25%) -50px 0,
linear-gradient(-45deg, #9b59b6 25%, transparent 25%) -50px 0,
linear-gradient(135deg, #9b59b6 25%, transparent 25%),
linear-gradient(-135deg, #9b59b6 25%, transparent 25%);
background-size: 100px 100px;
}注意事项
transform方法会改变元素的布局空间，可能影响周围元素的位置。clip-path的兼容性较好，但在极旧浏览器中可能需要前缀。- 伪元素法适合需要边框的场景，但代码量较多。
- 渐变背景法适合重复图案，但不适合单个菱形。
