A part of the abolute image on the clip path div is cut off

Question

I'm trying to place an absolute positioned image on top of the clip-path div. this is the outcome I got.

The bottom part of the image is cut off. How do I fix this? The below image shows how should it come after being set up correctly.

This is my code

CSS

.clip-path-outer-div {
    background-color: #683c68;
    -webkit-clip-path: polygon(50% 0%, 100% 13%, 99% 74%, 0 100%, 1% 13%);
    clip-path: polygon(50% 0%, 100% 13%, 99% 74%, 0 100%, 1% 13%);
    padding: 1% !important;
    position: relative !important;
}

.clip-path-div {
    background-image: url('https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGFya3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(50% 0%, 100% 13%, 99% 74%, 0 100%, 1% 13%);
    clip-path: polygon(50% 0%, 100% 13%, 99% 74%, 0 100%, 1% 13%);
    position: relative !important;
    height: 30rem;
}

.turtle-img {
    position: absolute;
    height: 15rem;
    width: 15rem;
    margin-top: 60%;
    margin-left: 25%;
    z-index: 100;
}

HTML

           <div>
                <div class="uk-child-width-1-2 set-div-padding" uk-grid>
                    <div class="clip-path-outer-div">
                        <div class="clip-path-div">
                            <image class="turtle-img" src="https://i0.wp.com/amazinglanka.com/wp/wp-content/uploads/2015/05/mydas.jpg" />
                        </div>
                    <div>
                </div>
            </div>

Thank you