Basically, is there any way I can add shape-outside to an absolute positioned image?
I have an image that has to be bottom right corner and I also need to use shape-outside
HTML:
<div id="description" class="card">
<p id="title" class="weight-bold">LOREM IPSUM</p>
<p id="text" class="weight-light">
<span id="p-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at felis ut erat ullamcorper ultricies sed nec magna. Curabitur condimentum porta diam, at bibendum tellus tempor sed. </span>
<br><br>
<span id="p-2">Maecenas eget pulvinar nisi. Nulla vehicula ac mi et malesuada. Nunc ac ornare justo, fringilla malesuada justo. Vivamus posuere justo id odio aliquam fermentum. Vivamus at rutrum lacus.</span>
<br><br>
<span id="p-3">Proin sollicitudin lobortis auctor. Suspendisse at urna sed nisl sodales euismod</span>
</p>
<br><br>
<p id="credits">
<span id="autor" class="weight-medium">Author</span><br>Author Role
</p>
<img src="image.png">
</div>
CSS:
#description{
margin-top: 66px;
background-color: $third_color;
color: $primary_color;
height: 380px;
flex-basis: 100%;
img{
position: absolute;
bottom: 0px;
right: 0px;
shape-outside: url("image.png");
shape-margin: 28px;
object-fit: contain;
}
p{
padding-left: 54px;
}
#title{
padding-top: 34px;
}
#credits{
padding-bottom: 34px;
}
}
If I tried using float: right;
then I wouldn't be able to stick it to the bottom of the div so that's why I tried using shape-outside + absolute position