我正在尝试创建一个包含其内容的 slider 单元格,但它有一个带框阴影的 flex 底部。底部和 slider 单元格的背景颜色将是动态的。我的问题是定位和使用正确的方法(伪 vs SVG 等)。
我需要它看起来像这样:
我尝试在我的 slider 单元格中添加一个新的 div,然后应用样式和/或伪元素。问题是我破坏了页面布局,无法对齐单元格内的内容,无法将白色背景设置为形状,也无法正确定位下面的内容。
.image-slider__curve {
position: absolute;
width: 100%;
height: 300px;
border-radius: 50% / 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
bottom: -90px;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 100%;
background-color: white;
z-index: -1;
}
}
我的 HTML 结构如下:
<div class="image-slider__cell">
<div class="content">Heading</div>
<div class="image-wrapper">...</div>
<div class="image-slider__curve"></div>
</div>
目前定位中断,形状和对齐方式不正确。任何帮助将非常感激。提前谢谢你。
最佳答案
.image-slider__cell {
position: relative;
width: 100%;
height: 300px;
}
.image-slider__cell .content {
position: absolute;
top: 80px;
left: 30px;
z-index: 1;
color: white;
font-size: 2em;
max-width: 100px;
}
.image-slider__cell .image-wrapper {
position: absolute;
top: 80px;
right: 50px;
width: 150px;
height: 220px;
border: solid 2px black;
z-index: 1;
background-color: white;
font-weight: bold;
/* the next tree lines are only used to center text */
display: flex;
justify-content: center;
align-items: center;
}
.image-slider__curve {
position: absolute;
width: 100%;
height: 300px;
border-radius: 0px 0px 100% 100%;
bottom: -90px;
background-color: rgb(4, 153, 151);
box-shadow: 0 6px 6px -2px gray;
top: 0px;
}
<div class="image-slider__cell">
<div class="content">Heading Heading Heading</div>
<div class="image-wrapper">Image</div>
<div class="image-slider__curve"></div>
</div>
关于html - 如何使用 CSS 创建带有框阴影和动态颜色的 flex slider 单元格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57400706/