मैं शुद्ध सीएसएस (कोई चित्र) के साथ इस अनियमित आकार की सीमा कैसे बना सकता हूं?

Question

मैं इसे प्रभावी ढंग से बनाने के लिए एक पृष्ठभूमि छवि (या किसी भी छवि-आधारित समाधान) का उपयोग करने से बचने की कोशिश कर रहा हूं:

नोट: लाल तीर प्रश्न में सीमा पर इशारा कर रहा है। तीर को आपके उत्तर में शामिल नहीं किया जाना चाहिए।

मैं शुद्ध सीएसएस (कोई चित्र) के साथ इस अनियमित आकार की सीमा कैसे बना सकता हूं? यदि छवियां अपरिहार्य हैं, तो सबसे संक्षिप्त और पठनीय उत्तर उत्कीर्ण और स्वीकृत होगा।

Answer 1

आप CSS का उपयोग कर सकते हैं (ध्यान में रखते हुए यह IE के पुराने संस्करणों के साथ काम नहीं करेगा)।

उदाहरण के लिए, आप आयत और दो त्रिकोण जैसी कुछ आकृतियों को जोड़ सकते हैं। इस jsfiddle देखें ।

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

और सीएसएस:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

आप यहां विभिन्न प्रकार के सीएसएस आकार देख सकते हैं । अगर सभी को एक से अधिक div की आवश्यकता नहीं है, तो चुनौती एक गहरी सीमा लागू होगी।

Comments

क्या ऐसा करने का कोई तरीका है जहां बहुभुज प्रतिशत-आधारित चौड़ाई का उपयोग करता है?

— मीका बोलन

यिसेला के दृष्टिकोण का उपयोग करते हुए, आप त्रिकोण को एक div (बॉर्डर-लेफ्ट और बॉर्डर-राईट को 1/2 वर्ग की चौड़ाई के साथ बना सकते हैं; बॉर्डर टॉप = इच्छित ऊँचाई; और एक मार्जिन-टॉप जोड़ सकते हैं (-1 * बॉर्डर-टॉप) । आप त्रिकोण lapping से पाठ को रोकने के लिए वर्ग के लिए गद्दी मूल्य जोड़ने की आवश्यकता होगी।

— होराशियो

आप इन अतिरिक्त आकृतियों को छद्म तत्वों में डाल सकते हैं :beforeऔर :afterअपने html'साफ' रखने के लिए। :beforeबाईं त्रिकोण, होगा :afterसही।

— विंसेंट

Answer 2

यिसला का जवाब ठोस है, लेकिन मुझे लगा कि मैं इस विकल्प की पेशकश करूंगा: बहुभुज या सीएसएस आकृतियों और क्लिप-पथ के साथ एक छवि यूआरआई का उपयोग करना। यहाँ एक त्वरित ट्यूटोरियल है ।

ध्यान दें कि यह विधि इस समय त्रिभुज बॉर्डर ट्रिक से भी कम ब्राउज़रों के साथ काम करेगी। हालाँकि, यदि आप अधिक जटिल आकार का उपयोग करना चाहते हैं या अपने पाठ को आकार में लपेटना चाहते हैं तो यह जाने का रास्ता होगा।

Comments

ऐसा प्रतीत होता है कि यह समाधान तब भी काम करेगा जब मुझे बहु-प्रतिशत चौड़ाई का उपयोग करने के लिए बहुभुज की आवश्यकता होगी। शायद, सीएसएस vwइकाई के माध्यम से । क्या यह संभव है?

— मीका बोलन

Answer 3

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

एसवीजी एक सादा पाठ / xml प्रारूप है। एक उदाहरण बहुभुज ( w3schools से ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg> 

एक उदाहरण इनलाइन (एम्बेडेड) एसवीजी (सरलीकृत) ( स्टैकओवरफ़्लो से ):

url("data:image/svg+xml;utf8, <svg></svg>");

ध्यान दें कि इनवॉइस उपयोग के लिए एसवीजी डेटा को "ठीक से बचना" चाहिए, जो एसवीजी फाइल को लिंक करने की तुलना में थोड़ा कम आकर्षक बनाता है।

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

SVG फाइलें वेक्टर होती हैं और इन्हें "बॉर्डर्स" विधि के विपरीत, प्रतिशत द्वारा स्केल किया जा सकता है। वे (वर्तमान में) सूचीबद्ध क्लिपिंग विधि की तुलना में बेहतर (गैर-इनलाइन कम से कम) समर्थन करते हैं। एसवीजी, सादा पाठ होने के नाते, उदाहरण के लिए PHP या अन्य सर्वर-साइड स्क्रिप्टिंग का उपयोग करके भी मक्खी पर उत्सर्जित हो सकता है।

Answer 4

यदि छवि पर आपका नीला क्षेत्र पारदर्शी png है और सफेद क्षेत्र पारदर्शी है, तो आपको इसे बेहतर बनाने के लिए इस html को शामिल करना होगा:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

और छवि पर इस सीएसएस का उपयोग करें:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

यह पूरी तरह से क्रॉस-ब्राउज़र समाधान है।