Не вижу смысла использовать clip-path
, достаточно обычного transform: skew();
.
Самый хитрый элемент здесь - это верхняя граница, которая растворяется с помощью радиального градиента, и потому, имеет необычную форму.
body { margin: 0; }
.box {
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 300px;
width: 100%;
overflow: hidden;
background-image: url('https://i.stack.imgur.com/m9kuJ.jpg');
background-size: cover;
background-position: center;
}
.title {
position: relative;
z-index: 0;
height: 150px;
width: calc(100% - 130px);
padding: 50px 50px 50px 150px;
box-sizing: border-box;
font-size: 28px;
color: #fff;
}
.title::before {
content: '';
position: absolute;
top: -8px;
left: 0;
z-index: -1;
height: calc(100% + 8px);
width: calc(110% + 100px);
transform-origin: top left;
transform: skewx(326deg);
background-image: radial-gradient( farthest-side at 0% 0%, #ffff 30%, #fff0 45%), linear-gradient(#ffff, #ffff), linear-gradient(#88f8, #88f8);
background-position: 0% 0px, 0% 0%, 10px 8px;
background-size: 75% 7px, 3px 100%, 100% 100%;
background-repeat: no-repeat;
}
<div class="box">
<div class="title">
Lorem ipsum dolor.
</div>
</div>