div

Question

के लिए सीमा-त्रिज्या बनाएं, मैंने div बनाया है, जहां मुझे border-radius को div पर बनाने के लिए सीएसएस लिखना है। तो मैं चाहता था कि border-radius निम्न छवि की तरह होना चाहिए।

सीएसएस कोड मैं क्या लिखा है इस प्रकार है।

{ 
      border-top-left-radius: 5px; 
      border-bottom-left-radius: 5px; 
      border-top-right-radius: 6% 60%; 
      border-bottom-right-radius: 6% 60%; 

      margin: 10px 0; 
      color: #FFFFFF; 
      background: -moz-linear-gradient(top, #2ea2f5 0%, #2ea2f5 50%, #0089f3 50%, #0089f3 100%); 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ea2f5), color-stop(50%,#2ea2f5), color-stop(50%,#0089f3), color-stop(100%,#0089f3)); 
      background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
      background: -o-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
      background: -ms-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
      background: linear-gradient(to bottom, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ea2f5', endColorstr='#0089f3',GradientType=0); 
} 

और यहां तक ​​कि आप के माध्यम से यह jsfiddle.net

तो मेरी मदद कृपया जा सकते हैं मैं 2 दिनों से इस के साथ फंस गए हैं।

Answer 1

ठीक है, मैं इसी तरह कुछ करने के लिए कामयाब रहे, और यह क्रॉस-ब्राउज़र (छोटे संपादन के बाद) समर्थित होना चाहिए:

http://jsbin.com/elubek/1/edit

सीएसएस:

div.wrapper { 
    position: relative; 
    width: 450px; 
} 

div.tag { 
    width: 400px; 
    padding: 3px 10px; 
    height: 74px; 
    background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
    border-radius: 5px; 
    position: absolute; 
    top: 0; 
    z-index: 120; 
} 

div.box1 { 
    height: 62px; 
    width: 62px; 
    right: 0px; 
    top: 9px; 
    border-radius: 10px; 
    z-index: -1; 
    position: absolute; 
    -webkit-transform: rotate(-45deg); 
    background: -webkit-linear-gradient(top right, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); 
    float: right; 
} 

div.circle { 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    z-index: 5; 
    border-radius: 100px; 
    background: white; 
    right: 10; 
    top: 35px; 
} 

p { 
    font-family: 'Verdana'; 
    color: white; 
    margin: 0; 
} 

p.prgress-info { 
    font-size: 25px; 
    letter-spacing: -1px; 
    padding-top: 10px; 
} 

p.deadline { 
    padding-bottom: 19px; 
    font-size: 12px; 
    font-weight: normal; 
} 

p.deadline span { font-size: 14px; } 

HTML:

<div class='wrapper'> 
    <div class='tag'> 
     <p class="prgress-info">003. In progress</p> 
     <p class="deadline"><span>7</span>/ Deadline: 30 July 2013</p> 
    </div> 
    <div class='box1'></div> 
    <div class='circle'></div> 
    </div> 

आप जिस त्रिज्या चाहते हैं उसे प्राप्त करने के लिए, आप div.box1 के the height/width के साथ खेल सकते हैं;)

Answer 2

border-radius इसके विस्तारित वाक्यविन्यास का उपयोग करके कुछ जटिल आकारों की अनुमति देता है। उदाहरण के लिए:

border-radius:15px 25px 25px 15px/15px 45px 45px 15px; 

कार्रवाई में इस के लिए http://jsfiddle.net/tDCaA/1/ देखें। यह उस दिशा में है जो आप खोज रहे हैं, लेकिन इसे काफी हासिल नहीं करता है।

समस्या यह है कि आगे की ट्विकिंग बहुत करीब नहीं होती है - नमूना छवि पर आपको मिली सीधी रेखाओं के साथ, आप वास्तव में border-radius प्रभाव को नहीं देख रहे हैं; यह border-radius से अधिक जटिल आकार है जो करने के लिए डिज़ाइन किया गया है। तो मेरी सलाह है कि यहां जवाब के रूप में border-radius पर ध्यान केंद्रित करना बंद करें, और विकल्पों की तलाश करें।

तो क्या विकल्प हैं? यहाँ कुछ आप की कोशिश कर सकते हैं:

• एक एसवीजी छवि। यह उदाहरण एक एसवीजी छवि के लिए एक अच्छा मामला है, क्योंकि आपके पास टैग के अंत में सफेद छेद जैसे कुछ छोटे डिज़ाइन तत्व हैं जो सीएसएस में हासिल करना आसान नहीं है।

• एक सीएसएस त्रिकोण। एक सीएसएस सीमा के साथ पुराने त्रिकोण हैक का उपयोग कर टैग का अंतिम भाग खींचे। यद्यपि आप इस पर गोल कोनों को गोल करने में परेशानी हो सकती है।

• रोटेशन। दूसरा तत्व बनाएं (संभवतः सीएसएस :after चयनकर्ता का उपयोग करके), जो टैग के अंतिम भाग के रूप में कार्य करेगा। फिर इसे आवश्यक आकार देने के लिए 45 डिग्री घुमाने के लिए सीएसएस का उपयोग करें। यद्यपि ईमानदार होने के लिए, मैं इसके लिए घूर्णन का उपयोग करने पर विचार करता हूं, और ब्राउज़र प्रदर्शन के लिए बहुत अच्छा नहीं है। हालांकि यह काम करना चाहिए। और चूंकि हम पहले से ही रोटेशन कर रहे हैं, इसलिए आप वांछित आकार में ट्विक करने के लिए अन्य ट्रांसफॉर्म प्रभावों का भी उपयोग कर सकते हैं।

• सीएसएस border-image। सीएसएस में border-image संपत्ति भी है जिसका उपयोग जटिल सीमाओं के लिए किया जा सकता है। एसवीजी के साथ संयुक्त, यह बहुत शक्तिशाली हो सकता है और आपको इच्छित सभी वैरिएबल आकार वाली सीमाएं दे सकता है। अधिकांश आधुनिक ब्राउज़र अब इसका समर्थन करते हैं (http://caniuse.com/#search=border-image)।

• एक पुरानी स्कूल की पृष्ठभूमि छवि। इस तरह की चीज़ के लिए सिर्फ एक सादा पीएनजी पृष्ठभूमि छवि का उपयोग करने से डरो मत। उपरोक्त सभी तकनीकों में उनकी जगह है, लेकिन पृष्ठभूमि छवियां अच्छी तरह से काम करती हैं और पुराने ब्राउज़र संस्करणों के साथ संगतता रखते हैं। यदि अन्य समाधान आपके लिए काम नहीं करते हैं तो इस तरह की चीज के लिए उनका उपयोग करने में कुछ भी गलत नहीं है।