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

Question

我想设计一个类似于 duckduckgo 的网站，具有圆形背景和位于曲线顶部的卡片：

但我现在所拥有的看起来像这样，其中剪辑路径切断了卡片：

代码看起来像这样，带有 css 部分：

 .two {
        background-color: #ff6b6c;
        clip-path: ellipse(99% 66% at 48% 77%);
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <section class="two" style="margin-top:250px;">
        <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>

我该如何解决？

Answer 1

我想这就是你所期待的。

.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>

Answer 2

我建议您使用背景元素作为伪 (::before) 元素。如果将其转换为伪元素，它将在后台呈现。

 .two {
        position: relative;
 }

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <section class="two" style="margin-top:250px;">
        <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>

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

Displaying a card on top of a clip-path shape

html

css

bootstrap-4

clip-path