एक ट्रैपेज़ॉयड बनाएं जिसमें पारदर्शी सीमाएं और पृष्ठभूमि हो?

Question

मुझे कुछ border tricks के साथ पता है, मैं ट्रैपेज़ॉयड आकार बना सकता हूं। मैं इसे पारदर्शी बनाने के लिए आरजीबीए (आर, जी, बी, ए) में अपनी सीमा-रंग भी सेट कर सकता हूं।

लेकिन क्या ट्रैपेज़ॉयड बनाना संभव है जिसमें पारदर्शी सीमाएं और पृष्ठभूमि हो?

वर्तमान में एक उदाहरण के लिए छवि के नीचे देखें,

, मैं इस प्रभाव को प्राप्त करने के लिए कुछ PNG छवियों का उपयोग करें, लेकिन विभिन्न आकार के पैदा छवियों वास्तव में बोरिंग काम है, इसलिए मैं एक के लिए देख रहा हूँ । सीएसएस soluation

Answer 1

व्यक्तिगत रूप से, मुझे लगता है कि यह overkill है, लेकिन यह इस तरह किया जा सकता है:

demo

एचटीएमएल:

<div class='outer'> 
    <div class='content'><!--stuff here--></div> 
    <div class='label l1'></div> 
    <div class='label l2'></div> 
</div> 

सीएसएस:

.outer { 
    position: relative; 
    width: 500px; /* whole thing breaks if this is not a multiple of 100px */ 
    border: solid .5em rgba(0,0,255,.5); 
    border-bottom: solid 0px transparent; 
    margin: 7em auto 0; 
    background: rgba(0,0,0,.5); 
    background-clip: padding-box; 
} 
.outer:before, .outer:after { 
    position: absolute; 
    top: 100%; 
    height: .5em; 
    background: rgba(0,0,255,.5); 
    content: '' 
} 
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; } 
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; } 
.content { 
    padding: .5em; 
    margin: 1.5em; 
    border-bottom: solid 1.5em transparent; 
    background: lightblue; 
    background-clip: padding-box; 
} 
.label { 
    overflow: hidden; 
    position: absolute; 
    top: 100%; 
    width: 15%; 
    height: 3em; 
} 
.l1 { left: 15%; } 
.l2 { left: 30%; } 
.label:before { 
    position: absolute; 
    top: -.5em; 
    width: 100%; 
    height: 2.5em; 
    border: solid .5em rgba(0,0,255,.5); 
    background: rgba(0,0,0,.5); 
    background-clip: padding-box; 
    content: ''; 
} 
.l1:before { left: 9%; transform: skewX(30deg); } 
.l2:before { right: 9%; transform: skewX(-30deg); } 

---

यह फ़ायरफ़ॉक्स, क्रोम, ओपेरा और सफारी में काम करता है (मैं, IE9 में यह परीक्षण करने के लिए डर गया था, हालांकि दोनों transform और background-clip काम) लेकिन केवल तभी जब .outer के लिए width100px की एक बहु है कि एक मूल्य है।

जब तक कि एक width100px की एक बहु है कि का उपयोग कर, यह केवल फ़ायरफ़ॉक्स और क्रोम (क्रोम में एक छोटे से गड़बड़ है में काम करता है - एक का उपयोग करके निर्धारित किया जा सकता है वेबकिट-केवल सही रेखीय ग्रेडिएंट कि तेजी से करने के लिए पारदर्शी से चला जाता है के लिए छोड़ दिया वास्तव में शुरुआत के करीब semitransparent नीले)।

यह ओपेरा और सफारी में टूट जाता है (अगर एक width का उपयोग कर कि 100px की एक बहु नहीं है):

Answer 2

आप bg रंग और सीमा रंग पारदर्शी बना सकते हैं, लेकिन सीमाओं समलम्ब के आकार का पालन नहीं करेगा:

http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/

तो आपकी सबसे अच्छी शर्त अब के लिए पीएनजी के साथ रहना है।