CSS3 ग्रेडियेंट के साथ एचटीएमएल में ट्रैपेज़ॉयड

Question

मैं एचटीएमएल 5 में एक ट्रैपेज़ॉयड बनाना चाहता हूं। मैं जानता हूँ कि यह सीमा त्रिज्या और 0 की ऊंचाई का उपयोग किया जा सकता है:

#trapezoid { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid COLOR HERE; 
    height: 0; 
    width: 100px; 
} 

हालांकि, मैं एक CSS3 के ढाल लागू करना चाहते हैं और उपरोक्त विधि केवल ठोस रंगों अनुमति देता है।

निम्न शैली समानांतर बना देगा। लेकिन क्या दोनों पक्षों की बजाय केवल एक पक्ष को छोड़ने का कोई तरीका है?

-webkit-transform: skew(20deg); 

Answer 1

चाल एक पृष्ठभूमि ढाल इस मामले में एक angled content mask बनाने के लिए, और फिर इच्छित स्टाइल के साथ नकाबपोश क्षेत्र में भरने, है। सामग्री मास्क के आकार पर फिसल जाएगी।

एक मुखौटा बस overflow:hidden के साथ एक कंटेनर है। यदि एक CSS3 ट्रांसफॉर्मर कंटेनर पर लागू होता है (उदाहरण के लिए, एक रोटेशन या स्की ऑपरेशन), मास्क में घुमावदार या तिरछा आकार होगा, और सामग्री को इस आकार में फिसल दिया जाएगा। नेस्टेड मास्क की एक जोड़ी, बाहरी एक तिरछा और आंतरिक एक काउंटर-स्क्व्यूड, 2 एंग्लेड पक्षों के साथ एक ट्राइपोज़ाइड मास्क उत्पन्न करता है। केवल आंतरिक मुखौटा को स्कूइंग करने से 1 एंग्लेड पक्ष के साथ एक ट्रैपेज़ॉयड पैदा होता है।

  Both masks skewed   Inner mask skewed 
      _________________   _________________ 
     /    \   |    \ 
     /clipped content \   | clipped content \ 
     /_____________________\  |__________________\ 

JSFiddle क़ौम:

• Both masks skewed
• Inner mask skewed

एचटीएमएल

<div class="main"> 
    <div class="outer-mask"> 
     <div class="inner-mask"> 
      <div class="content">Styled content goes here</div> 
     </div> 
    </div> 
</div> 

सीएसएस

.main { 
    position: relative; 
} 
.outer-mask { 
    position: absolute; 
    left: 95px; 
    top: 45px; 
    width: 390px; 
    height: 110px; 
    overflow: hidden; 
    -webkit-transform: skew(20deg, 0deg); 
     -ms-transform: skew(20deg, 0deg); 
     -o-transform: skew(20deg, 0deg); 
      transform: skew(20deg, 0deg); 
} 
.inner-mask { 
    position: absolute; 
    left: -45px; 
    top: 0px; 
    width: 390px; 
    height: 110px; 
    overflow: hidden; 
    -webkit-transform: skew(-40deg, 0deg); 
     -ms-transform: skew(-40deg, 0deg); 
     -o-transform: skew(-40deg, 0deg); 
      transform: skew(-40deg, 0deg); 
}