当前位置：首页 > CSS

css怎么制作菱形

2026-04-01 17:28:08CSS

使用 CSS 制作菱形

方法一：通过 `transform` 旋转正方形

将一个正方形元素旋转 45 度即可生成菱形。需要确保元素的宽度和高度相同。

.diamond {
  width: 100px;
  height: 100px;
  background-color: #ff6b6b;
  transform: rotate(45deg);
}

注意事项
旋转后元素可能会超出父容器边界，需调整 margin 或父容器的 padding 以避免布局问题。

方法二：使用 `clip-path` 裁剪

clip-path 可以直接裁剪出菱形，无需旋转，适合更复杂的形状控制。

css怎么制作菱形

.diamond {
  width: 100px;
  height: 100px;
  background-color: #4ecdc4;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

优势

不改变元素的实际布局（仍占据原始矩形空间）。
支持更灵活的形状调整，如非对称菱形。

方法三：伪元素叠加

通过伪元素生成旋转后的背景，避免影响内容布局。

css怎么制作菱形

.diamond-container {
  width: 100px;
  height: 100px;
  position: relative;
}

.diamond-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff9ff3;
  transform: rotate(45deg);
}

适用场景
需在菱形内放置文字或其他内容时，内容不会被旋转。

方法四：CSS 渐变背景

通过线性渐变模拟菱形图案（适合背景装饰）。

.diamond-pattern {
  width: 200px;
  height: 200px;
  background: 
    linear-gradient(45deg, #f368e0 25%, transparent 25%) 0 0,
    linear-gradient(-45deg, #f368e0 25%, transparent 25%) 0 50%,
    linear-gradient(45deg, transparent 75%, #f368e0 75%),
    linear-gradient(-45deg, transparent 75%, #f368e0 75%);
  background-size: 100px 100px;
}

效果
生成重复的菱形网格背景，适用于平铺设计。