html - 在剪辑路径形状的顶部显示卡片
问题描述
我正在寻找设计一个类似于dadduckgo的网站的网站,其背景为圆形,卡片位于曲线顶部:
但是我现在所拥有的看起来像这样,剪辑路径切断了卡片:
该部分的 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>
我该如何解决?
解决方案
我建议您将背景元素用作伪 (::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>
推荐阅读
- wordpress - WordPress 和 Chromebook 的 CORS 问题
- python - 在Python中将位板中的位移动到左侧的问题
- php - 由于路由问题,链接到另一个页面不起作用?
- python - 使用另一个函数更改生成器 - Python 3.x
- authentication - 用户在 OpenId Connect (AAD) 之后通过身份验证,但无法找到访问令牌
- java - 使用 Maven 的 javadoc 有什么问题?
- typescript - 在 TypeScript 中将所有类型的键分配给类
- c# - 如何确保在读取 C# 中的文件,然后将其存储在数据库中后,如果我要重新读取它,会出现错误
- java - 获取错误消息“线程“主”java.util.InputMismatchException 中的异常”
- javascript - 如何在浏览器中正确加载类