شرائح في دائرة باستخدام CSS

يعد إنشاء دوائر في CSS باستخدام border-radius ممارسة شائعة. ومع ذلك، هل يمكننا تحقيق تأثير مماثل مع الشرائح، على غرار المخطط الدائري؟ تتعمق هذه المقالة في طرق تحقيق ذلك من خلال HTML وCSS فقط، باستثناء استخدام JavaScript.

إنشاء شرائح متساوية الحجم

يتضمن أحد الأساليب للشرائح متساوية الحجم إنشاء قائمة توقف لـ التدرج المخروطي () باستخدام SCSS. يمكننا إنشاء دالة SCSS مخصصة لتوقف ($c) لإنشاء نقاط التوقف هذه بناءً على الألوان المتوفرة ($c)، مما يضمن تباعدًا متساويًا. تأخذ هذه الوظيفة في الاعتبار عدد الشرائح، وتحسب زاوية الشريحة كنسبة مئوية، وتولد قائمة بنقاط التوقف بنسب مناسبة.

على سبيل المثال، مع لوحة الألوان من Coolors، يمكننا استخدام نقاط التوقف الخاصة بنا () ضمن إعلان التدرج المخروطي ():

.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}

يسمح هذا الأسلوب بزوايا شريحة قابلة للتخصيص عن طريق تحديد زاوية مختلفة في التدرج المخروطي ().