0

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;
        }
    }

Here's how it currently looks

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

David
  • 23
  • 3

0 Answers0