क्लिपेड ओवरफ्लो

Question

के साथ 'ट्रैपेज़ियम' आकार का div बनाएं, मुझे आश्चर्य है कि अगर कोई भी संभव है, तो सीएसएस/एचटीएमएल/कैनवास का उपयोग करके ट्रैपेज़ियम कैसे बनाएं।

मैंने हैश को एक साथ जोड़ने की कोशिश की है केवल यह बहुत गन्दा है और वास्तविक दुनिया में उपयोग करने योग्य नहीं होगा।

div { 
width:0; 
margin-left:-1000px; 
height:100px; 
border-right:1000px solid lightblue; 
border-top:60px solid transparent; 
border-bottom:60px solid transparent; 
padding-left:1000px; 
white-space:no-wrap; 
} 

यहाँ मेरा jsFiddle ...

http://jsfiddle.net/Liamatvenn/WWYYM/

Answer 1

मैं नहीं जानता कि आप क्या चाहते। तो मुझे लगता है कि यह आपको थोड़ा सा मदद करेगा।

div { 
    width:0; 
    margin-left:-100px; 
    height:100px; 
    border-right:100px solid lightblue; 
    border-top:60px solid transparent; 
    border-bottom:60px solid transparent; 
    padding-left:100px; 
    white-space:no-wrap; 
} 

Answer 2

क्या आप इस तरह कुछ के लिए बात कर रहे हैं? इस पहेली को जांचें: jsfiddle.net/WWYYM/3/। अगर यह आप के लिए काम करता है तो मुझे बतलाएगा। मैं निम्नलिखित की तरह अपने कोड को संपादित किया है:

div { 
    border-bottom: 100px solid lightblue; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 500px; 
    white-space:no-wrap; 
    text-align:center; 
} 

Answer 3

आप इसके अलावा एक जैसे नीचे बदल सकता है:

 

div { 
width:0; 
margin-left:-50px; 
margin-top: -500px; 
height:100px; 
border-right:100px solid lightblue; 
border-top:60px solid transparent; 
border-bottom:60px solid transparent; 
padding-left:1000px; 
white-space:no-wrap; 

transform:rotate(20deg); 
-ms-transform:rotate(20deg); /* IE 9 */ 
-webkit-transform:rotate(90deg); 
 

}

Answer 4

मैं रैपर के रूप में 2 अतिरिक्त divs के साथ ऐसा कर सकते हैं।

सीएसएस

.trapezium { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(6deg); 
    overflow: hidden; 
} 

.trapezium > div { 
    background-color: yellow; 
    position: absolute; 
    left: 0px; 
    top: 50px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(-12deg); 
    overflow: hidden; 
} 

.trapezium > div > div { 
    font-size: 60px; 
    background-color: yellow; 
    position: absolute; 
    left: 0px; 
    top: -30px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(6deg); 
    overflow: hidden; 
} 

demo