CSS-Farbbereiche diagonal getaucht

Question

Ist es möglich, einen diagonalen Strich zu erzielen, mit einem bisschen Offset in jeder Seite. Ich habe eine Variation davon mit css linear-gradient gesehen, aber ich brauche etwas anderes. Ich kann nicht beschreiben, was ich genau in Worten brauche. Ich werde Bilder verwenden.

Ich habe mit Steigungen versucht zu spielen:

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

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

Das ist, wie weit ich gegangen bin. Ich denke daran, mit Kindern zu spielen, aber ich bin mir noch nicht sicher.

Irgendwelche Ideen?

Ich möchte keine Bilder verwenden, ich möchte nur CSS verwenden.

Answer 1

Ich bin in der Lage, das gewünschte Ergebnis mit dem folgenden linear gradient zu erhalten:

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

Sie die Form sehr leicht steuern kann.

der erste Parameter oder linear-gradient(6deg...steuert den Grad der Schrägstellung - die Lage der Trennlinie Sie negative Werte als auch

Die Steuer Prozent nach jeder der Farben verwendet werden können.

Wenn die Zahlen nicht zu 100% summieren, wird der Teiler unscharf.

Ich habe einen Bildhintergrund und background-blend-mode:overlay; im Beispiel unten für Demozwecke hinzugefügt.

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

Eine extrem unsophisticated Demo transform: rotate()

rotateZ() Die CSS-Funktion definiert eine Transformation, die das Element um die z-Achse bewegt, ohne es zu verformen. Die Größe der Bewegung wird durch den angegebenen Winkel definiert. Wenn positiv, wird die Bewegung im Uhrzeigersinn, wenn negativ, wird es gegen den Uhrzeigersinn sein.

Der Arbeits Inhalt Ihrer schrägen Behälter würde sorgfältige Platzierung erfordern, und es gibt einige mögliche Positionierung Probleme, aber mit Mühe, ich denke, das funktionieren könnte.

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

Sie könnten versuchen, einen separaten div für die Sache 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

Ok also hier ist verwenden. Dies muss reaktionsfähig und in der Lage sein, sich im Laufe der Zeit zu entwickeln, also suchte ich nach einer besseren Lösung und hier ist was ich found. Um es ein wenig zu vereinfachen, ist hier ein Auszug:

.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>