दिलचस्प पोस्ट
सीएसएस संक्रमण प्रभाव छवि blurry बनाता है / छवि 1px चाल, क्रोम में? एक क्वेरी में उपयोग किए जाने वाले कॉलम नाम बनाने के लिए MySQL concat ()? क्षैतिज स्क्रॉलबार के साथ JTable क्या हमें कक्षा में हमेशा एक डिफॉल्ट कन्स्ट्रक्टर शामिल करना चाहिए? ग्राफ़-आधारित डेटाबेस (http://neo4j.org/) के उपयोग के मामलों क्या हैं? UIView के साथ एक पुस्तक की तरह एक पृष्ठ को चालू करें? प्रवाह Dispatch.dispatch (…): प्रेषण के बीच में प्रेषण नहीं कर सकते कीबोर्ड इनपुट भाषा बदलें WPF में एक वेक्टर छवि का उपयोग करने का सबसे अच्छा तरीका है? इंटरऑप प्रक्रिया के बाद Excel.exe को बंद नहीं किया जा सकता जावास्क्रिप्ट में एरो कुंजी प्रेस का पता लगा रहा है चल रहे ऐप से Windows C ++ स्टैक ट्रेस रूबी XML को JSON कनवर्टर करने के लिए? यादृच्छिक क्रम और पृष्ठांकन लचीलाशर्क क्लासिक एएसपी में यूटीएफ -8 को आईएसओ -8859-1 में कनवर्ट करें

एक अवतल सीमा त्रिज्या संभव है?

यहाँ एक सरल उत्तल उदाहरण है

http://jsfiddle.net/swY5k/

#test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; } 

हालांकि, मैं एक अवतल सीमा त्रिज्या चाहता हूँ।

मैंने सीमा त्रिज्या नकारात्मक बनाने की कोशिश की लेकिन यह काम नहीं कर रहा था।

अवतल / उत्तल का उदाहरण:

यहां छवि विवरण दर्ज करें

Solutions Collecting From Web of "एक अवतल सीमा त्रिज्या संभव है?"

पृष्ठभूमि पर रेडियल ग्रेडिएंट्स का उपयोग करके आप एक अवतल सीमा का छाप दे सकते हैं। उदाहरण के लिए, ऐसा कुछ:

 #test { width: 200px; height: 200px; background: #888888; background: radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px), radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px); background-size:100px 200px, 100px 200px; background-position:0 0,100% 0; background-repeat:no-repeat; } 

ध्यान दें कि अधिकांश वेबकिट ब्राउज़रों को अभी भी रेडियल-ग्रेडिएंट के लिए उपसर्ग की आवश्यकता होती है, और यदि आप पुराने ब्राउज़रों का पूर्ण समर्थन करना चाहते हैं, तो आपको पुराने ढाल वाक्यविन्यास को भी लागू करना पड़ सकता है

के चतुर उपयोग के साथ :before और :after छद्म वर्गों के :after , हम एक अवतल रूप अनुकरण कर सकते हैं:

 #test{ width: 100px; height: 300px; background: green; position: relative; display: inline-block; } #test:before{ background: white; height: 300px; width: 30px; border-radius: 0 60px 60px 0 / 0 300px 300px 0; display: inline-block; content: ''; } #test:after{ background: white; height: 300px; width: 30px; border-radius: 60px 0 0 60px / 300px 0 0 300px; display: inline-block; content: ''; position: relative; left: 40px; } 

#test div एक सादे आयत है लेकिन इसके :before और :after तत्वों के :after पृष्ठभूमि का रंग (इस मामले में सफ़ेद) से भरा आधा भाग अवतल होता है।

इस jsfiddle देखें

आकार उत्पन्न करने के लिए, आप छद्म तत्वों का उपयोग कर सकते हैं

 div { height: 250px; width: 100px; background: tomato; position: relative; margin:0 auto; } div:before { content: ""; height: 100%; width: 50%; position: absolute; background: white; border-radius: 50%; left: -25%; transition: all 0.8s; } div:after { content: ""; height: 100%; width: 50%; position: absolute; background: white; border-radius: 50%; right: -25%; transition: all 0.8s; } div:hover:before, div:hover:after { background: blue; } 
 hover the shape to see how it works: <div></div> 

मैं border-image का उपयोग करने की सलाह देता हूं, border-image एक स्केलेबल एसवीजी छवि के साथ।

इस तरह से आप किसी भी आकार को सीमा में चाहते हैं; border-radius द्वारा की जाने वाली आकृतियों तक सीमित होने की कोई आवश्यकता नहीं है, और कोई भी चतुर हैक्स या अतिरिक्त मार्कअप करने की कोई आवश्यकता नहीं है

नीचे की ओर यह है कि न तो border-image और न ही एसवीजी पुराने ब्राउज़रों (अर्थात् पुरानी IE संस्करण) में समर्थित हैं। लेकिन बेशक, border-radius या तो नहीं है, इसलिए आप इस तकनीक के साथ बहुत कुछ खोना नहीं चाहते हैं, इसके मुकाबले लचीलेपन की तुलना में आपको लाभ मिलता है।

SVG ऐसे आकार बनाने का अनुशंसित तरीका है। यह सादगी और पैमाने की क्षमता प्रदान करता है

हम ऊपर की तरह एक आकार बनाने के लिए SVG के पथ तत्व का उपयोग कर सकते हैं और इसे कुछ ठोस रंग, ढाल या पैटर्न के साथ भर सकते हैं।

path तत्व में आकृतियों को परिभाषित करने के लिए केवल एक विशेषता d का उपयोग किया जाता है। इस विशेषता में कई कम आदेश और कुछ पैरामीटर शामिल हैं जो उन कमांड को काम करने के लिए आवश्यक हैं।

निम्नलिखित कोड एक उत्तल आकार बनाएगा:

 <path d="M 150,25 Q 115,100 150,175 Q 185,100 150,25" /> 

और निम्नलिखित एक अवतल आकृति बनाएगा:

 <path d="M 30,25 L 80,25 Q 50,100 80,175 L 30,175 Q 60,100 30,25" /> 

नीचे दिए गए कोड के ऊपर दिए गए कमांड का संक्षिप्त विवरण है:

  • M कमांड का इस्तेमाल शुरुआती बिंदु को परिभाषित करने के लिए किया जाता है। यह शुरुआत में दिखाई देता है और उस बिंदु को निर्दिष्ट करें जहां ड्राइंग को शुरू करना चाहिए।
  • L कमांड का इस्तेमाल सीधा रेखा खींचने के लिए किया जाता है।
  • Q कमांड का उपयोग वक्रों को आकर्षित करने के लिए किया जाता है।

आउटपुट छवि:

उत्तल और अवतल आकार

कार्य डेमो:

 <svg width="300" height="200" viewBox="0 0 300 200"> <defs> <linearGradient id="grad"> <stop offset="0" stop-color="#ddd" /> <stop offset=".5" stop-color="#fff" /> <stop offset="1" stop-color="#ddd" /> </linearGradient> </defs> <g stroke-width="1" stroke="#000" fill="url(#grad)"> <path d="M30,25 L80,25 Q50,100 80,175 L30,175 Q60,100 30,25" /> <path d="M150,25 Q115,100 150,175 Q185,100 150,25" /> </g> </svg>