Przekroje kolorów CSS zaniknęły po przekątnej

Question

Czy możliwe jest wykonanie ukośnego skoku linii, z odrobiną przesunięcia w dowolnym boku. Widziałem odmianę tego dokonanego z liniowym gradientem css, ale potrzebuję czegoś nieco innego. Nie wiem, jak opisać to, czego potrzebuję dokładnie w słowach. Użyję zdjęć.

Próbowałem grać z gradientów:

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

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

To jak daleko Poszedłem. Myślę o zabawie z dziećmi, ale nie jestem jeszcze pewien.

Wszelkie pomysły?

Nie chcę używać obrazów, chcę używać tylko CSS.

Answer 1

jestem w stanie uzyskać pożądany efekt przy użyciu następujących linear gradient:

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

można bardzo łatwo kontrolować kształt.

pierwszy parametr lub linear-gradient(6deg...kontroluje stopień przekrzywianie - można użyć wartości ujemne oraz

W wartości procentowe po każdej z barw kontrolować położenie linii podziału.

Jeśli liczby nie sumują się do 100%, dzielnik będzie niewyraźny.

Dodałem tło obrazu i background-blend-mode:overlay; w poniższym przykładzie w celach demonstracyjnych.

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

Niezwykle niewyszukany demo użyciu transform: rotate()

The rotateZ() funkcji CSS definiuje transformację, która porusza element wokół osi bez deformacji. Wielkość ruchu jest określona pod określonym kątem; jeśli jest dodatnia, ruch będzie zgodny z ruchem wskazówek zegara, a jeśli będzie ujemny, będzie przeciwny do ruchu wskazówek zegara.

treść pracy swoich pochyłych pojemników wymaga starannego rozmieszczenia, i istnieje kilka potencjalnych problemów pozycjonowania, ale z wysiłkiem, myślę, że to może działać.

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

można spróbować za pomocą oddzielnego div dla 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 więc o to chodzi. To musi pozostać responsywne i móc ewoluować w miarę upływu czasu, więc szukałem lepszego rozwiązania i oto, co mam found. Aby uprościć to trochę, oto fragment:

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