如何实现以下叠加，同时保持响应

Question

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

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

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

Answer 1

在中心容器之前和之后使用一些伪类，可以使用CSS边框创建CSS三角形。

查看CSS三角形：https://css-tricks.com/snippets/css/css-triangle/

从技术上讲，您不需要使用容器的前/后，但我仍然在这里使用它来保持标记清洁。

接下来使用一些定位和一些宽度计算，我将两个容器（左侧和右侧）设置为宽度40％，这使得我可以将20％用于中心区域。

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

请在此处查看JSFiddle（已更新）：https://jsfiddle.net/x117ss0q/4/

public Form1()
{
     InitializeComponent();
     Connect_Opc_Server("Kepware.KEPServerEX.V5");
     ConnectToSqlToRead();
     ShowPartType(1);
}

private void timer_Kepware_Tick(object sender, EventArgs e)
{
     Thread KepwareThread = new Thread(new ThreadStart(Kepware_Read_Write));
     if (KepwareThread.IsAlive)
     { }
     else
     {
         KepwareThread.Start();
     }
 }

public void Kepware_Read_Write()
{
    if (KepwarePLCReadError == false)
    {
        synch_read();
    }

    if (KepwarePLCReadOK == true)
    {
        synch_write();
    }           
}

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