<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.