html - 剪辑路径 div 上的绝对图像的一部分被切断

Question

我正在尝试将绝对定位的图像放在剪辑路径 div 的顶部。这是我得到的结果。

图像的底部被切断。我该如何解决？下图显示了正确设置后的效果。

这是我的代码

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>

谢谢

标签： htmlcssclip-path