Game UI
Crystal Gem
مادة جوهرة متعددة الأوجه مع قطوع زاوية وتوهج داخلي ولمعات حادة وإحساس collectible.
Cg
الاستخدامات
- أيقونات مكافأة
- بطاقات ألعاب
- شارات فاخرة
المعاملات
- facet count
- inner color
- glint
- outline
- glow
AI Prompt
أنشئ مادة crystal gem مع لمعات مضلعة ولون داخلي مشبع وبريق أبيض حاد وشكل مناسب للويب.
ملاحظات Tailwind
استخدم clip-path polygons أو pseudo-elements متعددة لصنع الأوجه من دون صور.
ملاحظات الأداء
أوجه 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" />;
}