Html 在剪辑路径形状的顶部显示卡

我希望设计一个类似的网站，有圆形的背景和曲线顶部的卡片：

但我现在看到的是这样的，剪辑路径切断了卡片：

代码与本节的css类似：

.two{
背景色：#ff6b6c；
剪辑路径：椭圆（99%66%在48%77%）；
}

作为特色的

Cras justo odio
Dapibus ac设施在
eros的前庭

作为特色的

Cras justo odio
Dapibus ac设施在
eros的前庭

我想这正是你所期待的

.two {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: #ff6b6c;
        clip-path: ellipse(99% 66% at 48% 77%);
    }

<section style="margin-top:250px;position: relative;">
    <div class="two"></div>
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <div class="card-header">
                    Featured
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
        <div class="col">
            <div class="card" style="width: 18rem;">
                <div class="card-header">
                    Featured
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
    </div>
</section>

.two{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
背景色：#ff6b6c；
剪辑路径：椭圆（99%66%在48%77%）；
}
作为特色的

Cras justo odio
Dapibus ac设施在
eros的前庭

作为特色的

Cras justo odio
Dapibus ac设施在
eros的前庭

我建议您将背景元素用作伪（：：before）元素。如果将其转换为伪元素，它将在背景中渲染

.two{
位置：相对位置；
}
.2：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#ff6b6c；
剪辑路径：椭圆（99%66%在48%77%）；
}

作为特色的

Cras justo odio
Dapibus ac设施在
eros的前庭

作为特色的

Cras justo odio
Dapibus ac设施在
eros的前庭

您可以将

剪辑路径

转换为

元素之前的伪
：：并将其用作具有z索引的背景。这样你就不会修改内容了。你能举一个伪
：：before
element@ph-quiett如果你觉得这个答案很有帮助，请接受答案，我们可以结束这个问题：）