How make this background blue properly?-CodePudding

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 >
  <div ></div>
  <div >
    <img src={{content.field_image}}>
  </div>
</div>

CodePudding user response：

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 >
  <img src="https://dummyimage.com/520x550">
</div>

CodePudding user response：

Just use a psuedo elements, like this:

.image::before {
  background-color: blue;
  content: '';
  display: flex;
  inset: 0 0 0 0;
  position: absolute;
}