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>
>Solution :
for a single child/container , you may use width,background and rotate:
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>