मैं पृष्ठ की पूरी चौड़ाई फिट करने के लिए दो divs प्राप्त करने की कोशिश कर रहा हूं, लेकिन एक विकर्ण रेखा के साथ आधे में विभाजित।दो divs विकर्ण रेखा के साथ विभाजित - सीएसएस
मैं कैसे सीएसएस के माध्यम से दो divs के साथ इस लक्ष्य को हासिल कर सकते हैं? यह एक स्लाइडर के लिए है और जरूरत है सामग्री जब
समाप्त प्रत्येक भाग को जोड़ा गया यह इस
उदाहरण 1
div {
min-height: 100px;
background: #D25A1E;
position: relative;
width: calc(50% - 30px);
}
.div1 {
float: left;
}
.div2 {
float: right;
}
.div1:after, .div2:before {
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
.div1:after {
left: 100%;
border-top: 100px solid #D25A1E;
border-right: 50px solid transparent;
}
.div2:before {
right: 100%;
border-bottom: 100px solid #D25A1E;
border-left: 50px solid transparent;
}<div class="div1"></div>
<div class="div2"></div>की तरह कुछ हो सकता है उदाहरण 2
div {
background: #D25A1E;
min-height: 100px;
width: calc(50% - 25px);
position: relative;
}
.div1 {
float: left;
}
.div2 {
float: right;
}
div:after {
position: absolute; top: 0px;
content:'';
z-index: -1;
height: 100%;
width: 50%;
background: #D25A1E;
}
.div1:after {
right: 0;
transform-origin: bottom right;
transform: skewX(-20deg);
}
.div2:after {
left: 0;
transform-origin: top left;
transform: skewX(-20deg);
}<div class="div1"></div>
<div class="div2"></div>ग्रेट उत्तर होने के लिए केंद्र में विभाजन की आवश्यकता है। मैं बस कुछ ऐसा कर रहा था। यदि आप 'em' में सभी मान करते हैं तो यह फ़ॉन्ट आकार में ऑटो-एडजस्ट करता है - [** मेरा डेमो **] (http://codepen.io/Paulie-D/pen/WvJwpP) –
क्या आप अब तक की कोशिश की थी? –
आपको [इस उत्तर] पर एक नज़र रखना चाहिए (http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive/30441123#30441123)। उन उदाहरणों के संयोजन का उपयोग करना जहां बाईं ओर और दाईं तरफ एक स्लंट है, आप जो भी चाहते हैं उसे प्राप्त कर सकते हैं। यदि आप करते समय अटक जाते हैं तो कृपया प्रश्न को आजमाएं और अपडेट करें। – Harry
https://jsfiddle.net/z5fogus5/ मुझे केवल डायग्नल – 5kud