Css 如何在保持其响应性的同时实现以下覆盖

我试图实现白色覆盖，可以看到上面。图像背后是一个幻灯片，我需要显示一点点它与三角形削减中间，我试图找出一种方法如何实现这一点与伪元素，同时保持解决方案的反应，同时，但似乎找不到出路。我也在考虑使用多个背景，但不确定如何使其中一个在中间，另外两个在侧面

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

---

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

利用中心容器上的一些伪类before和after，您可以使用CSS边框创建CSS三角形

有关CSS三角形，请参见以下内容：

从技术上讲，你不需要在容器上使用before/after，但我在这里用它来保持标记的干净

接下来，使用一些定位和一些宽度计算，我将两个容器（左侧和右侧）的宽度设置为40%，这使我可以在中心部分使用20%的宽度

最后使用vw单位，我将左边框和右边框的大小设置为10vw。这一点很重要，因为只要幻灯片是全宽的，它基本上允许边界根据视口宽度进行响应

请参见此处的JSFIDLE（已更新）：

---

是否可以将中心三角形保持在固定宽度？我所说的“响应性”是指确保左侧和右侧始终占据所需的宽度。我目前正在进行试验，以使其完全响应。我认为这是可能的包装容器周围的三个覆盖和利用显示表和表格单元

<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;
}