如何制作左侧带悬浮图片的裁剪卡片？图片被裁剪求助

想要用CSS制作特定样式的卡片，最初无法实现左侧弧形边缘，尝试border-radius未达到预期效果；改用clip-path后卡片边缘效果达标，但出现新问题：卡片内的图片被clip-path裁剪了。以下是当前的代码：

HTML代码 #

<div class="card book" style="width:100%">
    <div class="card-body">
        <div class="row">
            <div class="col-4">
                <img src="{{ asset('books/images/img.png') }}">
            </div>
            <div class="col-8" style="padding-left:5px;">
                <h5 class="card-title">title</h5>
                <h6 class="card-text card-subtitle text-muted mb-2">substile </h6>

                <ul class="nav book-table-info align-items-center">
                    <li class="nav-item">
                        <p>الصفحات</p>
                        <p>
                            <span class="numero">324</span>
                        </p>
                    </li>
                    <li class="nav-item">
                        <p>lang</p>
                        <p>
                            en
                        </p>
                    </li>
                    <li class="nav-item">
                        <p>size</p>
                        <p> MB <span class="numero">7.34</span></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS代码 #

.book {
    clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%, 0 150px);
}
.book li:before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    height: 20px;
    background-color: #333;
    width: 2px;
    opacity: .5;
    transform: translate(-50%, -50%);
}

.book li {
    margin-left: 2rem;
    margin-bottom: 1rem;
    position: relative;
}

.book p {
    vertical-align: middle;
    border: 0;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    position: relative;
}

.book img {
    position: absolute;
    top: -24px;
    border: 1px solid #ede9e5;
    max-width: 120px;
    height: auto;
    max-height: 200px;
}

1. 解决图片被裁剪的问题 #

clip-path会裁剪容器内所有子元素，因此需要将图片移出卡片容器，通过独立父容器+绝对定位实现图片悬浮效果，避免被裁剪。

2. 实现左侧弧形边缘 #

替换原有的直线多边形clip-path，使用带弧形的路径或伪元素方案，实现自然的左侧弧形效果。

修改后的完整代码 #

HTML代码 #

<div class="card-wrapper">
    <img src="{{ asset('books/images/img.png') }}" class="book-cover">
    <div class="card book" style="width:100%">
        <div class="card-body">
            <div class="row">
                <div class="col-8" style="padding-left:5px;">
                    <h5 class="card-title">title</h5>
                    <h6 class="card-text card-subtitle text-muted mb-2">substile </h6>

                    <ul class="nav book-table-info align-items-center">
                        <li class="nav-item">
                            <p>الصفحات</p>
                            <p>
                                <span class="numero">324</span>
                            </p>
                        </li>
                        <li class="nav-item">
                            <p>lang</p>
                            <p>
                                en
                            </p>
                        </li>
                        <li class="nav-item">
                            <p>size</p>
                            <p> MB <span class="numero">7.34</span></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS代码 #

.card-wrapper {
    position: relative;
    max-width: 500px; /* 根据实际需求调整卡片最大宽度 */
    margin: 2rem auto; /* 居中布局，可按需修改 */
}

.book {
    /* 使用path实现左侧弧形边缘，30px为弧形半径 */
    clip-path: path('M30 0 L100% 0 L100% 100% L0 100% L0 30 A30 30 0 0 0 30 0 Z');
    padding-left: 40px; /* 给左侧图片预留空间，避免内容被遮挡 */
    position: relative;
    background: #fff;
    border: 1px solid #eee;
}

.book-cover {
    position: absolute;
    left: -20px; /* 调整图片位置，使其部分突出在卡片左侧 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中图片 */
    border: 1px solid #ede9e5;
    max-width: 120px;
    height: auto;
    max-height: 200px;
    z-index: 1; /* 确保图片显示在卡片上方 */
}

/* 保留原有列表样式 */
.book li:before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    height: 20px;
    background-color: #333;
    width: 2px;
    opacity: .5;
    transform: translate(-50%, -50%);
}

.book li {
    margin-left: 2rem;
    margin-bottom: 1rem;
    position: relative;
}

.book p {
    vertical-align: middle;
    border: 0;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    position: relative;
}

兼容性备用方案（若path不支持） #

如果clip-path: path()兼容性无法满足需求，可改用伪元素实现左侧弧形：

.book {
    border-radius: 0 10px 10px 0;
    padding-left: 40px;
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
}

.book::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background: #fff;
    border-radius: 0 0 30px 0;
}

.book::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: #eee; /* 与卡片边框颜色一致 */
    border-radius: 0 0 30px 0;
}

内容的提问来源于stack exchange，提问作者Abanoub Wagih