CSS实现不是直角的菱形效果

CSS实现不是直角的菱形效果

在 CSS 中实现非直角菱形（例如带圆角或斜切效果的菱形）可以通过多种方式实现，以下是几种常见方法：

方法 1：使用 clip-path 裁剪

通过 clip-path 直接裁剪出菱形形状，并添加圆角效果。

<div class="diamond"></div>

.diamond {
  width: 200px;
  height: 200px;
  background: #3498db;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* 菱形裁剪 */
  border-radius: 15px; /* 添加圆角（部分浏览器支持） */
}

注意：部分浏览器可能不支持 clip-path 与 border-radius 的组合效果。

方法 2：旋转 + 圆角（伪元素）

通过旋转正方形并添加圆角，利用伪元素避免内容变形。

<div class="diamond">
  <div class="content">内容</div>
</div>

.diamond {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 15px; /* 控制圆角 */
}

.diamond::before {
  content: '';
  position: absolute;
  width: 141.4%; /* 100% * √2 ≈ 141.4% */
  height: 141.4%;
  background: #3498db;
  transform: rotate(45deg) translate(-20%, -20%); /* 旋转并调整位置 */
  border-radius: 15px; /* 圆角跟随旋转 */
}

.content {
  position: relative;
  z-index: 1;
  padding: 20px;
  color: white;
}

优点：兼容性好，支持圆角。 缺点：需要计算旋转后的尺寸。

方法 3：CSS skew 斜切变形

使用 skew() 变形实现斜角菱形。

<div class="diamond"></div>

.diamond {
  width: 200px;
  height: 200px;
  background: #3498db;
  transform: skewX(-20deg) skewY(-20deg); /* 斜切变形 */
  border-radius: 15px; /* 圆角效果 */
}

适合非对称菱形，圆角可能变形。

方法 4：SVG 背景

使用 SVG 绘制菱形作为背景。

<div class="diamond"></div>

.diamond {
  width: 200px;
  height: 200px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 0 L100 50 L50 100 L0 50 Z" fill="%233498db" rx="10"/></svg>');
  background-size: cover;
}

优点：完美控制形状和圆角，支持复杂路径。 缺点：动态修改颜色或尺寸不够灵活。

方法 5：CSS 渐变模拟

通过线性渐变拼接菱形（适合简单背景）。

.diamond {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, transparent 25%, #3498db 25%, #3498db 75%, transparent 75%);
  border-radius: 15px;
}

仅适合纯色背景，无法放置内容。

选择建议

场景	推荐方法
需要放置内容且兼容性好	方法 2（伪元素 + 旋转）
纯装饰性菱形带圆角	方法 1（clip-path）
动态颜色和尺寸	方法 2 或方法 1
复杂路径或高精度控制	方法 4（SVG）

完整示例：带圆角的可点击菱形按钮

<div class="diamond-button">
  <span>点击我</span>
</div>

.diamond-button {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 50px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
}

.diamond-button::before {
  content: '';
  position: absolute;
  width: 141.4%;
  height: 141.4%;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  transform: rotate(45deg) translate(-20%, -20%);
  border-radius: 12px;
  transition: transform 0.3s;
}

.diamond-button:hover::before {
  transform: rotate(45deg) translate(-20%, -20%) scale(1.1);
}

.diamond-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2em;
  z-index: 1;
}

支持悬停动画、圆角和渐变背景的菱形按钮。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github