Skewed Kanten mit CSS

Question

Ich versuche, dies zu replizieren, im Wesentlichen:

Also im Grunde zwei 50% <div> s Seite an Seite, mit irgendeiner Form der absoluten Positionierung (ich nehme an) um die linke Box zu erreichen, um über die Spitze der rechten Box zu gehen (die rote Linie repräsentiert nur die Mitte des Viewports)

Irgendwelche Hinweise? Thanks :)

Answer 1

.container { 
 
    width: 500px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.box1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    transform: skewX(-20deg) translateX(-40%); 
 
    position: absolute; 
 
    z-index: 10; 
 
} 
 

 
.box2 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    z-index: 0; 
 
} 
 

 
Should be pretty simple with CSS3.

<div class="container"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
</div>

Answer 2

Versuchen Sie, diese

.wrapper { 
 
    overflow-x: hidden; 
 
} 
 

 
.outer { 
 
    position: absolute; 
 
    width: 2000px; 
 
    left: 50%; 
 
    bottom: 0; 
 
    margin-left: -1000px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.left__inner { 
 
    background: goldenrod; 
 
    padding: 24px 48px; 
 
    flex: 1; 
 
    transform: skew(45deg); 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
.right__inner { 
 
    background: #222; 
 
    padding: 24px 48px; 
 
    flex: 1; 
 
    transform: skew(45deg); 
 
} 
 

 
.left__text, 
 
.right__text { 
 
    transform: skew(-45deg); 
 
    span { 
 
    font-weight: 200; 
 
    font-size: 36px; 
 
    text-transform: uppercase; 
 
    } 
 
} 
 

 
.left__text { 
 
    color: #3c3c3c; 
 
} 
 

 
.right__text { 
 
    color: Goldenrod; 
 
}

<div class="wrapper"> 
 
    <div class="outer"> 
 
    <div class="left__inner"> 
 
     <div class="left__text"> 
 
     <span> so skewy</span> 
 
     </div> 
 
    </div> 
 
    <div class="right__inner"> 
 
     <div class="right__text"> 
 
     <span>span much angle</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

ich es so machen würde dies ist nur ein Beispiel, nicht eine fertige Lösung))

<div class="container"> 
<div class="left"></div> 
<div class="right"></div> 
</div> 

.container { 
display: flex; 
} 

.container div { 
width: 50%; 
height: 200px; 
position: relative; 
} 

.container .left:before { 
content: ''; 
position: absolute; 
right: 0; 
top: 0; 
height: 100%; 
transform: skewY(-1.5deg); 
background: inherit; 
} 

Answer 4

Ich biete eine Version ohne die Transformation, mit Pseudoelement. Es ist schneller und verzerrt den Text nicht.

.container { 
 
    width: 500px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.box1 { 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    position: absolute; 
 
    left: 0; 
 
} 
 

 
.box1::after{ 
 
    background: linear-gradient(to bottom right, blue 50%, transparent 0); 
 
    content: " "; 
 
    width: 20%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 100%; 
 
    z-index: 1; 
 
} 
 

 
.box2 { 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: red; 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class="container"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
</div>