सीएसएस का उपयोग करके एक सर्कल में सेगमेंट

सीमा-त्रिज्या का उपयोग करके सीएसएस में सर्कल बनाना एक आम बात है। हालाँकि, क्या हम पाई चार्ट के समान खंडों के साथ समान प्रभाव प्राप्त कर सकते हैं? यह आलेख जावास्क्रिप्ट के उपयोग को छोड़कर, केवल HTML और CSS के माध्यम से इसे प्राप्त करने के तरीकों पर चर्चा करता है। SCSS का उपयोग करते हुए एक शंकु-ग्रेडिएंट()। हम दिए गए रंगों ($c) के आधार पर इन स्टॉप्स को उत्पन्न करने के लिए एक कस्टम SCSS फ़ंक्शन स्टॉप्स ($c) बना सकते हैं, जिससे समान रिक्ति सुनिश्चित हो सके। यह फ़ंक्शन स्लाइस की संख्या को ध्यान में रखता है, प्रतिशत के रूप में स्लाइस कोण की गणना करता है, और उचित प्रतिशत के साथ स्टॉप की एक सूची तैयार करता है।

उदाहरण के लिए, कूलर्स के रंगों के पैलेट के साथ, हम अपने स्टॉप का उपयोग कर सकते हैं () एक शंकु-ढाल() घोषणा के भीतर कार्य करता है: