How make this background blue properly?

Question

Good morning, I need to reproduce this shape but I don't know how to reproduce the blue background properly. do you have any idea? the absolute position doesn't suit me because it's a responsive image. For the image, I used the rotate property :

  .content {
  display: flex;
  .image {
    flex: 0 0 50%;
    img {
      transform: rotate(85deg);
    }
    @include media-screen-lg {
      padding-left: 24px;
      padding-right: 0;
    }
  }

<div class="content">
  <div class="text"></div>
  <div class="image">
    <img src={{content.field_image}}>
  </div>
</div>

Answer 1

For a single child/container, you may use width, background and rotate, for example:

.image {
  background: blue;
  width: max-content;/*shrinks to image's width */
  margin: 3em;
}

img {
  rotate: 5deg
}

<div class="image">
  <img src="https://dummyimage.com/520x550">
</div>