css - 如何在保持响应的同时实现以下叠加

Question

我正在尝试实现上面可以看到的白色覆盖。它后面的图像是一个幻灯片，我需要用中间的那个三 Angular 形来展示它的一点点，我试图找出一种方法来用伪元素实现这一点，同时保持解决方案的响应性，但似乎找不到办法。我也在考虑使用多个背景，但不确定如何将其中一个放在中央，另外两个放在两侧。

<div id="slideshow"></div>

以上是目前幻灯片放映的标记(幻灯片显示为该 div 的背景图像，它是绝对定位的)。

Answer 1

在中心容器上使用一些伪类 before 和 afters，您可以使用 CSS 边框创建 CSS 三 Angular 形。

请参阅 CSS 三 Angular 形:https://css-tricks.com/snippets/css/css-triangle/

从技术上讲，您不需要对容器使用之前/之后，但我还是在这里使用它来保持标记干净。

接下来使用一些定位和一些宽度计算，我将两个容器(左侧和右侧)的宽度设置为 40%，这样我就可以在中间部分留出 20% 的空间。

最后使用 vw 单位，我将 border-left 和 border-right 尺寸设置为 10vw。这很重要，因为它基本上允许边框根据视口(viewport)宽度进行响应，只要幻灯片是全宽即可。

在这里查看 JSFiddle(更新):https://jsfiddle.net/x117ss0q/4/

<div id="slideshow">
    <div class="slideshow-overlay-wrapper">
        <div class="slideshow-overlay left"></div>
        <div class="slideshow-overlay-center"></div>
        <div class="slideshow-overlay right"></div>
    </div>
</div>

---

    #slideshow{
    background-color: #333;
    position: relative;
    height: 200px;
}
.slideshow-overlay-wrapper {
    bottom: 0;
    display: table;
    left: 0;
    position: absolute;
    width: 100%;
    table-layout: fixed;
}
.slideshow-overlay {
  background-color: #fff;
  display: table-cell;
  height: 50px;
}
.slideshow-overlay-center {
    display: table-cell;
    height: 50px;
    width: 200px;
    position: relative;
}
.slideshow-overlay-center:after {
    content: '';
    left: 0;
    position: absolute;
    border-bottom: 0px solid transparent;
    border-top: 50px solid transparent;
    border-left: 100px solid #FFF;
    width: 0;
    height: 0;
}
.slideshow-overlay-center:before {
    content: '';
    right: 0;
    position: absolute;
    border-bottom: 0px solid transparent;
    border-top: 50px solid transparent;
    border-right: 100px solid #FFF;
    width: 0;
    height: 0;
}