VmVibe Materials
EN中文ESHIAR
返回地图
Game UI

水晶宝石

一种切面宝石材质，带有锐利棱面、内部辉光、高光切边和可收集游戏物件感。

当前状态: ReadyCg
Cg

适用场景

  • 奖励图标
  • 游戏卡片
  • 高级徽章

可调参数

  • facet count
  • inner color
  • glint
  • outline
  • glow

AI Prompt

生成水晶宝石 UI 材质：多边形切面高光、饱和内部颜色、锐利白色闪光和适合网页的干净轮廓。

Tailwind 思路

用 clip-path polygon 或伪元素分层制造切面，不必依赖图片素材。

性能提醒

静态 clip-path 切面成本低；避免大量大多边形动画。

CSS

.crystal-gem {
  clip-path: polygon(50% 0, 92% 24%, 80% 82%, 50% 100%, 20% 82%, 8% 24%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.75), transparent 24%),
    linear-gradient(45deg, #72fff7, #6e6bff 48%, #ff7adf);
  box-shadow: 0 18px 50px rgba(113, 111, 255, .28);
}

React 示例

export function CrystalGem() {
  return <span className="crystal-gem" aria-hidden="true" />;
}