<section>
<div class="container">
<div class="jc-sb">
<div>Lorem lorem</div>
<div>поделиться</div>
</div>
</div>
<div class="skew"></div>
</section>
<section>
<div class="container">
222
</div>
</section>
section:nth-child(1) {
background: gray;
height: 200px;
display: flex;
align-items: flex-end;
}
section:nth-child(2){
background: #2b2b2b;
height: 200px;
}
.jc-sb {
position:relative;
z-index: 2;
width: 100%;
display: flex;
justify-content: space-between;
}
.skew {
right:0;
width: 45%;
position: absolute;
box-sizing: border-box;
padding: 15px;
background: #2b2b2b;
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}
section {
position:relative;
}
.container {
max-width: 600px;
width: 100%;
margin: 0 auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.