css - How to make curve style menu in css3? -

क्या सीएसएस 3 के साथ वक्र / आर्क शैली मेनू बनाना संभव है?

क्या मैं इस उपयोग कैनवास को प्राप्त कर सकता हूं एचटीएमएल 5 में कुछ है?

पहले से धन्यवाद, लोगान

मुझे दुर्भाग्य से किसी भी सुरुचिपूर्ण समाधान के बारे में पता नहीं है, विशेषकर जब यह मेनू आइटम की बात आती है, लेकिन चाप को सादे सीएसएस और दो कुछ HTML तत्वों में संभव होना चाहिए।

शायद यह आरंभ करें।

html

  & lt; div class = "container" & gt; & Lt; div वर्ग = "ग्रे" & gt; & lt; / div & gt; & Lt; div वर्ग = "सफेद" & gt; & lt; / div & gt; & Lt; / div & gt;   
  सीएसएस   
 । कंटेनर {ऊंचाई: 200px; छिपा हुआ सैलाब; स्थिति: रिश्तेदार; }। ग्रे,। व्हाईट {स्थिति: पूर्ण; बाएं: -25%; सही: -25%; सीमा-त्रिज्या: 100%; } .gray {/ * एक चाप * / शीर्ष का अनुकरण करने के लिए सीमा त्रिज्या के साथ एक ग्रे सीमा का उपयोग करें: -50%; सीमा: 100 पीएक्स ठोस ग्रे; सीमा-शीर्ष: कोई नहीं; ऊंचाई: 200 पिक्सेल; }। White {/ * बैनर के शीर्ष किनारे के लिए शीर्ष पर एक सफेद ओवल डाल दिया * / top: -80%; पृष्ठभूमि रंग: सफेद; ऊंचाई: 300px; }   
  
 चुनौती अब सभी मेनू मदों की स्थिति में होगी और ... मैं इसे वास्तव में एक व्यवहार्य समाधान के रूप में नहीं देखता, लेकिन मैं किसी भी तरह से पोस्टिंग की उम्मीद है कि आपको यह उपयोगी हो सकता है।  
 आपको इस कार्य के लिए और संभवत: अनुकूल उपकरण देता है।  
 संपादित करें  
 संस्करण जो मैंने एसवीजी के साथ किया था, जो एक प्रूफ ऑफ अवधारणा है और इसे अच्छे से देखने के लिए tweaking की आवश्यकता होती है (क्रोम में भयानक और कुछ कारणों से IE में छोटा), लेकिन यह आपको मूल विचार देता है:  
 < मजबूत> एसवीजी   
  & lt; svg दृश्य बॉक्स = "0 0 500 300" संस्करण = "1.1" & gt; & LT; defs & gt; & Lt;! - पर शुरू (10,40) अंत (490,40) नियंत्रण बिंदु का उपयोग करें (250, 85) - & gt; & Lt; पथ id = "curvetext" d = "एम 10,40 क्यू 250,85 490,40" / & gt; & Lt; / defs & gt; & Lt; एक्स = "0" y = "0" xlink: href = "# curvetext" fill = "none" स्ट्रोक = "ग्रे" स्ट्रोक-चौड़ाई = "50" / & gt; & Lt; text font-size = "12" fill = "white" & gt; & Lt; टेक्स्टपथ xlink: href = "# curvetext" & gt; & Lt; a xlink: href = "http://example.com" & gt; मेनू 1 & lt; / a & gt; मेनू 2 मेनू 3 मेनू 4 मेनू 5 मेनू 6 मेनू 7 मेनू 8 मेनू 9 & lt; / पाठ पथ & gt; & Lt; / पाठ & gt; & Lt; / svg & gt;   
 एसवीजी डेमो: