如何使这个背景正确地变成蓝色？

Question

早上好，我需要重现这个形状，但我不知道如何正确重现蓝色背景。你有什么主意吗？绝对位置不适合我，因为它是响应式图像。对于图像，我使用了旋转属性：

  .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

对于单个子/容器，您可以使用width,background和rotate，例如：

.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>