Para criar esse efeito, basta utilizar transform: skewX(-18deg);
no elemento que você deseja criar o efeito de inclinação.
Exemplo:
* { padding: 0; margin: 0 }
.container {
background:blue;
background-size: cover;
height: 149.8px;
overflow:hidden;
width: 314px;
}
/* Elemento inclinado */
.overlay {
background: #00000050;
height: 100%;
width: 65%;
margin-left: 46%;
transform: skewX(-18deg);
overflow:hidden;
}
h1, span {
color:#FFF;
display:block;
margin: 30px;
transform: skewX(18deg);
}
span {
margin-top: -20px;
}
<div class="container">
<div class="overlay">
<h1>Title</h1>
<span>Description</span>
</div>
</div>
Referência: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew
Você também pode usar um background gradient para fazer esse efeito. Basta adicionar background: linear-gradient(107deg, transparent 20%, green 20%);
no elemento que você quer, por exemplo:
* { padding: 0; margin: 0 }
.container {
background:blue;
background-size: cover;
height: 149.8px;
overflow:hidden;
width: 314px;
}
/* Elemento inclinado */
.overlay {
background: linear-gradient(107deg, transparent 20%, green 20%);
float:right;
height: 100%;
padding-left: 20px;
width: 60%;
overflow:hidden;
}
h1, span {
color:#FFF;
display:block;
margin: 30px;
}
span {
margin-top: -20px;
}
<div class="container">
<div class="overlay">
<h1>Title</h1>
<span>Description</span>
</div>
</div>