ومع ذلك ، هل من الممكن تقسيم الدائرة كما هو موضح في الصورة المقدمة؟ السؤال الذي يطرح ما إذا كان يمكن تحقيق ذلك دون الاعتماد على javaScript وفح فقط من خلال html و css. العناصر

شرائح غير متكافئة دون أن تكون عناصر

شرائح متساوية تتطلب المحتوى أو الرسوم المتحركة

إيقاف القائمة للحصول على conic-pradient () لإنشاء شرائح موحدة. على سبيل المثال ، ضع في اعتبارك اللوحة التالية:

$ c: #f94144 ، #f3722c ، #f8961e ، #f9c74f ، #90be6d ، #43aa8b ، #577590 ؛ توقف ($ c) { $ n: length ($ c) ؛ // عدد الشرائح $ p: 100 ٪/$ n ؛ // شريحة الزاوية كنسبة ٪ من الدائرة $ l: () ؛ // قائمة التوقفات ، فارغة في البداية for $ i من 1 إلى $ n { $ l: $ l ، nth ($ c ، $ i) 0 ٪ $ i*$ p } regurn $ l } ينشئ هذا النهج القائمة التالية من التوقفات:

#F8961E 0 ٪ 42.8571428571 ٪ ، #F9C74F 0 ٪ 57.1428571429 ٪ ، #90BE6D 0 ٪ 71.4285714286 ٪ ، #43AA8B 0 ٪ 85.7142857143 ٪ ، #577590 0 ٪ 100 ٪

ومع ذلك ، يتضمن هذا الإخراج العشرية غير الضرورية والتوقف الافتراضي الصريح. لذلك ، وظيفة محسّنة هي:
@وظيفة توقف ($ c) { $ n: length ($ c) ؛ // عدد الشرائح $ p: 100 ٪/$ n ؛ // شريحة الزاوية كنسبة ٪ من الدائرة $ l: () ؛ // قائمة التوقفات ، فارغة في البداية for $ i من 1 إلى $ n { $ l: $ l ، nth ($ c ، $ i) if ($ i & gt ؛ 1 ، 0 ٪ ، unquote ('')) إذا ($ i & lt ؛ $ n ، route ($ i*$ p) ، unquote ('')) } regurn $ l }
والنتيجة هي كما يلي:
#f94144 14 ٪ ، #f3722c 0 ٪ 29 ٪ ، #f8961e 0 ٪ 43 ٪ ، #f9c74f 0 ٪ 57 ٪ ، #90be6d 0 ٪ 71 ٪ ، #43aa8b 0 ٪ 86 ٪ ، #577590 0 ٪
• العرض: 20em ؛ / * ضبط العرض على قطر الفطيرة المطلوب */ راتيو الجانب: 1 ؛ / * اجعل العنصر مربع */ الحدود الحدودية: 50 ٪ ؛ / * اقلب المربع إلى قرص */ / * شرائح على قدم المساواة */ الخلفية: Conic-Radient (توقف ($ C)) }

مع أربعة إعلانات CSS فقط ، يمكننا إنشاء دائرة مجزأة في شرائح متساوية. لتدوير الشرائح ، نقوم ببساطة بتحديد زاوية بداية مختلفة لـ Conic-tradient (). العرض: 16em ؛ / * ضبط العرض على قطر الفطيرة المطلوب */ راتيو الجانب: 1 ؛ / * اجعل عنصر فطيرة مربع */ الحدود الحدودية: 50 ٪ ؛ / * اقلب المربع إلى قرص */ / * شرائح الحجم على قدم المساواة */ خلفية: CONIC-PRADEINT (من 17DEG ، #F94144 14 ٪ ، #F3722C 0 ٪ 29 ٪ ، #F8961E 0 ٪ 43 ٪ ، #F9C74F 0 ٪ 57 ٪ ، #90BE6D 0 ٪ 71 ٪ ، #43AA8B 0 ٪ 86 ٪ ، #577590 0 ٪) }