सीएसएस रंग खंड तिरछे

Question

किसी भी तरफ ऑफ-सेट के साथ एक विकर्ण रेखा स्ट्रोक को पूरा करना संभव है। मैंने सीएसएस रैखिक-ढाल के साथ इसे पूरा करने में बदलाव देखा है, लेकिन मुझे कुछ अलग चाहिए। मुझे नहीं पता कि मुझे शब्दों में बिल्कुल क्या चाहिए। मैं चित्रों का उपयोग करूंगा।

मैं ढ़ाल के साथ खेल की कोशिश की है:

.diagonal{ 
 
    background-color: #34ADFF; 
 
    background-image: linear-gradient(to right top, whitesmoke 50%, #34ADFF 50%); 
 
    height: 300px; 
 
}

<div class="diagonal"> 
 
</div>

है कि कितनी दूर मैं चले गए हैं। मैं बाल divs के साथ खेलने के बारे में सोच रहा हूँ, लेकिन मुझे अभी तक यकीन नहीं है।

कोई विचार?

मैं छवियों का उपयोग नहीं करना चाहता, मैं सिर्फ सीएसएस का उपयोग करना चाहता हूं।

Answer 1

मैं निम्नलिखित linear gradient का उपयोग कर वांछित परिणाम प्राप्त करने में सक्षम हूँ:

linear-gradient(6deg, transparent 73%, rgba(50, 87, 106, 0.72) 27%); 

आप बहुत आसानी से आकार को नियंत्रित कर सकते हैं।

पहले पैरामीटर या linear-gradient(6deg...नियंत्रण के तिरछा डिग्री - आप नकारात्मक मूल्यों के रूप में अच्छी तरह से

रंगों में से प्रत्येक के बाद

प्रतिशत उपयोग कर सकते हैं विभाजन रेखा का स्थान नियंत्रित करते हैं।

यदि संख्या 100% तक नहीं जोड़ती है तो विभाजक धुंधला हो जाएगा।

मैंने डेमो प्रयोजनों के लिए नीचे दिए गए उदाहरण में एक छवि पृष्ठभूमि और background-blend-mode:overlay; जोड़ा।

body { 
 
    text-align: center; 
 
} 
 

 
.test { 
 
    height: 400px; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    background: url(https://unsplash.it/500/400), linear-gradient(6deg, transparent 73%, rgba(50, 87, 106, 0.72) 27%); 
 
    background-blend-mode:overlay; 
 
}

<div class="test"></div>

Answer 2

एक बेहद सरल डेमो transform: rotate()

का उपयोग कर rotateZ() सीएसएस समारोह एक परिवर्तन है कि यह विरूपण के बिना z- अक्ष के चारों ओर ले जाता है तत्व को परिभाषित करता है। आंदोलन की मात्रा निर्दिष्ट कोण द्वारा परिभाषित की जाती है; यदि सकारात्मक हो, तो आंदोलन घड़ी की दिशा में होगा, अगर नकारात्मक हो, तो यह विपरीत दिशा में होगा।

काम कर सामग्री अपने तिरछी कंटेनरों की सावधान नियुक्ति की आवश्यकता होगी, और वहाँ कुछ संभावित स्थिति मुद्दे हैं, लेकिन प्रयास के साथ, मुझे लगता है कि यह काम कर सकता था।

body { 
 
    background: lightgray; 
 
    margin: 0; 
 
    height: 300vh; 
 
} 
 
header, footer { 
 
    position: fixed; 
 
    height: 20vh; 
 
    width: 120vw; 
 
    left: -10vw; 
 
    overflow: hidden; 
 
} 
 
header { 
 
    background: lightblue; 
 
    top: -6vh; 
 
} 
 
footer { 
 
    background: lightgreen; 
 
    bottom: -6vh; 
 
} 
 
footer, 
 
header p { 
 
    transform: rotateZ(-3deg); 
 
} 
 
header, 
 
footer p { 
 
    transform: rotateZ(3deg); 
 
}

<header> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</header> 
 
<footer> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</footer>

Answer 3

आप ठीक है इसलिए यहाँ बात है linear-gradient

.diagonal-top { 
 
    background-image: linear-gradient(to left top, whitesmoke 50%, #34ADFF 50%); 
 
    height: 20px; 
 
} 
 
.diagonal-bottom { 
 
    background-image: linear-gradient(to right top, #34ADFF 50%, whitesmoke 50%); 
 
    height: 40px; 
 
} 
 

 
.header { 
 
    height: 30px; 
 
    background-color: #34ADFF; 
 
} 
 

 
.footer { 
 
    height: 50px; 
 
    background-color: #34ADFF; 
 
} 
 

 
.clearfix { 
 
    height: 30px; 
 
    background-color: whitesmoke; 
 
}

<div class="header"></div> 
 
<div class="diagonal-top"></div> 
 
<div class="clearfix"></div> 
 
<div class="diagonal-bottom"></div> 
 
<div class="footer"></div>

Answer 4

के लिए एक अलग div उपयोग करने का प्रयास कर सकता है। यह उत्तरदायी रहना चाहिए और समय के साथ विकसित होने में सक्षम होना चाहिए, इसलिए मैंने एक बेहतर समाधान की खोज की और यहां मैं found हूं।

.se-container { 
 
    display: block; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    padding-top: 100px; 
 
} 
 

 
.se-slope { 
 
    margin: 0 -50px; 
 
    transform-origin: left center; 
 
} 
 

 
.se-slope:nth-child(odd) { 
 
    background: url(http://lorempixel.com/400/200/); 
 
    background-size: cover; 
 
    transform: rotate(5deg); 
 
    margin-top: -200px; 
 
    box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.4); 
 
} 
 

 
.se-slope:nth-child(even) { 
 
    background: linear-gradient(to right, purple 0%, red 100%); 
 
    transform: rotate(-5deg); 
 
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4) inset; 
 
} 
 

 
.se-content { 
 
    margin: 0 auto; 
 
} 
 

 
.se-content p { 
 
    width: 75%; 
 
    max-width: 500px; 
 
    margin: 0 auto; 
 
    font-size: 18px; 
 
    line-height: 24px; 
 
} 
 

 
.se-slope:nth-child(odd) .se-content { 
 
    transform: rotate(-5deg); 
 
    padding: 130px 100px 250px 100px; 
 
} 
 

 
.se-slope:nth-child(even) .se-content { 
 
    transform: rotate(5deg); 
 
    padding: 150px 100px 250px 100px; 
 
}

<section class="se-container"> 
 
    <div class="se-slope"> 
 
    <article class="se-content"> 
 
     <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> 
 
    </article> 
 
    </div> 
 
    <div class="se-slope"> 
 
    <article class="se-content"> 
 
     <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> 
 
    </article> 
 
    </div> 
 
    <div class="se-slope"> 
 
    <article class="se-content"> 
 
     <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> 
 
    </article> 
 
    </div> 
 
</section>