score:0

Accepted answer

what you want is impossible because clip-path will clip the element and all its content.

you can try to build the shape differently using skew transformation like below:

.header {
  height: 200px;
  position:relative;
  overflow:hidden;
  z-index:0;
}
.header:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:left;
  transform:skewy(-5deg);
  background-image: linear-gradient(215deg, #3f2b96, #a8c0ff);;
}
img {
 display:block;
 margin: 10px 10px 0 auto;
}

body {
 margin:0;
}
<div class="header">
 <img src="https://picsum.photos/id/1000/200/200">
</div>


Related Query

More Query from same tag