सीएसएस ट्रांसफॉर्म स्क्वायर पतली रैम्बस

Question

कैसे एक रैम्बस बनाने के लिए: (लाल रंग में दिखाया गया है) सीएसएस का उपयोग करके एक वर्ग को बदलकर? केवल बी और सी को इंगित करना चाहिए। वर्ग का मूल आकार 25px द्वारा 25px है।

मैं इस परिणाम को प्राप्त करने की कोशिश कर रहा हूं और बाद में इसे 45 डिग्री घुमाएगा ताकि यह हीरा जैसा दिखाई दे। मुझे लगता है कि यह ट्रांसफॉर्म का उपयोग करके किया जा सकता है: मैट्रिक्स();

पीएस मैं explorercanvas का उपयोग न करने के लिए जितना संभव हो कोशिश करना चाहता हूं, क्योंकि मैं HTML में स्क्रिप्ट टैग को कम करने की कोशिश कर रहा हूं।

Answer 1

-webkit-transform: rotate(45deg) skew(20deg, 20deg) 

स्कू मूल्यों को बदलें ताकि आपके हीरे को कितना पतला हो सके। यह अन्य कोनों को धक्का देगा और विशिष्ट आयामों को बनाए रखने के लिए आपको पूरी वस्तु को स्केल करने की आवश्यकता होगी।

आपके द्वारा वर्णित परिवर्तन के साथ यहां jsfiddle है।
और सीएसएस परिवर्तनों पर कुछ further reading।

Answer 2

मुझे पता है कि आप पहले ही एक उत्तर स्वीकार कर चुके हैं, लेकिन आप इसे transform का उपयोग किए बिना कर सकते हैं, जो अक्सर क्रॉस-ब्राउज़र (विशेष रूप से आईई में) को लागू करने के लिए विचित्र है। मेरी तकनीक का नकारात्मक पक्ष यह है कि खेल में कुछ और तत्व हैं।

बंद आधार पर इस: http://www.howtocreate.co.uk/tutorials/css/slopes

देखें: http://jsfiddle.net/rQCQ5/

Answer 3

scaleX या scaleY का उपयोग करते हुए एक छोटे से अधिक आसान हो सकता:

transform: scaleX(.5) rotate(45deg); 

http://jsfiddle.net/greypants/t5Dt8/

बस याद है कि आदेश मामलों , और यह आपके विपरीत के विपरीत है जो आपको लगता है।

Answer 4

यह भी करने का मेरा तरीका है, लेकिन फिर भी मुझे नहीं लगता कि यह ठीक से छाया प्राप्त करना संभव है।

.rhombus{ 
width: 0; 
height: 0; 
position: relative; 
margin: -60px 0 0 60px; 
border-bottom: solid 360px #000 ; 
border-left: solid 240px transparent; 
border-right: solid 240px transparent; 
z-index:2; 
} 

http://jsfiddle.net/vCQ3c/

Answer 5

एना ट्यूडर suggestsskewX और scaleY उपयोग करने के लिए आयाम एक ही रखने के लिए क्षतिपूर्ति करने के लिए। skew काम करता है के बारे में और समझने के लिए, लिंक किए गए वीडियो

.rhombus { 
    transform: skewX(30deg) scaleY(.86); /* .86 = cos(30deg) */ 
}