"CSS3 तिरछा एक साइड रूपांतरण"CSS3 के रूपांतरण तिरछा एक साइड
मैं एक समाधान नहीं मिला बनाने के लिए यह संभव है, लेकिन यह क्योंकि मैं पृष्ठभूमि (नहीं रंग)
के लिए एक छवि का उपयोग करने की जरूरत है, मेरे लिए उपयोगी नहीं है#skewOneSide {
border-bottom: 40px solid #FF0000;
border-left: 50px solid rgba(0, 0, 0, 0);
height: 0;
line-height: 40px;
width: 100px;
}
यहां तक कि इस JsFiddle उपयोगी रूप में अच्छी तरह
आप :before साथ की कोशिश बहुत करीब, केवल एक चीज है कि आप वास्तव में सीमाओं के बजाय तिरछा उपयोग कर रहा था बदलना पड़ा था नहीं है (विषम क्षेत्र पारदर्शी होना चाहिए): http://jsfiddle.net/Hfkk7/1101/
संपादित करें: आपका सीमा दृष्टिकोण भी काम करेगा, केवल एक चीज जिसे आपने गलत किया था, आपके div के शीर्ष पर पहले तत्व था, इसलिए पारदर्शी सीमा दिखाई नहीं दे रही थी। आप स्थिति अपने div के बाईं ओर छद्म तत्व होता है, तो सब कुछ बहुत काम किया है जाएगा: http://jsfiddle.net/Hfkk7/1102/
इस प्रयास करें: छवि छवि के लिए एक नेस्टेड div का उपयोग
करने के लिए unskew और देना यह विपरीत skew मूल्य। तो अगर आपके माता-पिता पर 20 डिग्री थी तो आप नेस्टेड (छवि) div को -20deg का एक स्केव मान दे सकते हैं।
.container {
overflow: hidden;
}
#parallelogram {
width: 150px;
height: 100px;
margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
overflow: hidden;
position: relative;
}
.image {
background: url(http://placekitten.com/301/301);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>उदाहरण:
मैं जानता हूँ कि यह पुराना है, लेकिन मैं मार्जिन के बजाय एक ही प्रभाव को प्राप्त करने के लिए एक रेखीय-ढाल उपयोग करने का सुझाव चाहते हैं ऑफसेट। यह किसी भी सामग्री को अपनी मूल जगह पर बनाए रखेगा।
एचटीएमएल
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
सीएसएस
/* reset */
ul, li, a {
margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
display: inline-block;
text-align: center;
}
/* appearance styling */
ul {
/* hacks to make one side slant only */
overflow: hidden;
background: linear-gradient(to right, red, white, white, red);
}
li {
background-color: red;
transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
-webkit-transform:skewX(-20deg);
}
li a {
padding: 3px 6px 3px 6px;
color: #ffffff;
text-decoration: none;
width: 80px;
transform:skewX(20deg);
-ms-transform:skewX(20deg);
-webkit-transform:skewX(20deg);
}
आप कर सकते हैं कि को बदलने और मूल को बदलने का उपयोग कर।
विभिन्न ट्रांसफॉर्मों का संयोजन समान परिणाम देता है। मुझे उम्मीद है आपको यह उपयोगी लगेगा। :) सरल परिवर्तनों के लिए इन उदाहरणों को देखें। इस छोड़ दिया है बिंदु:
div {
width: 300px;
height:200px;
background-image: url('http://placecage.com/g/300/200');
-webkit-transform: perspective(300px) rotateX(-30deg);
-o-transform: perspective(300px) rotateX(-30deg);
-moz-transform: perspective(300px) rotateX(-30deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
margin: 10px 90px;
}<div></div>यह सही तिरछा बिंदु है:
div {
width: 300px;
height:200px;
background-image: url('http://placecage.com/g/300/200');
-webkit-transform: perspective(300px) rotateX(-30deg);
-o-transform: perspective(300px) rotateX(-30deg);
-moz-transform: perspective(300px) rotateX(-30deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
margin: 10px 90px;
}<div></div>क्या transform: 0% 50%; करता है यह खड़ी मध्यम और क्षैतिज करने के लिए मूल सेट है तत्व के बाएं।तो परिप्रेक्ष्य छवि के बाएं हिस्से में दिखाई नहीं दे रहा है, इसलिए यह फ्लैट दिखता है। परिप्रेक्ष्य प्रभाव सही भाग पर है, इसलिए यह slanted लग रहा है।
यह लगभग नौकरी कर रहा है जैसा कि मुझे चाहिए लेकिन यहां पर पृष्ठभूमि की छवि को भी स्कूइंग करना, क्या इसके लिए कोई फिक्स है। किसी भी तरह +1 जोड़ा धन्यवाद :) – Syed