带有向下三角形和均匀背景图像的Div

Question

我不确定这是否可能。但我正在尝试制作以下内容：https://jsfiddle.net/hayleycnelson/dhran86o/8/

* { margin: 0; padding:0;}

.box 
{
position: relative;
width: 100%;
height: 70vh;
padding: 0px;
background: url(https://images.wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg);
background-size: 100%;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
}

.box:before 
{
content: "";
position: absolute;
top: 70vh; /* must match width of div */
left: 48vw;
border-style: solid;
border-width: 26px 26px 0;
border-color: lightblue transparent;
display: block;
width: 0;
z-index: 0;
}

<div class="box"> </div>

 

，但背景图片跨越整个div 和向下三角形。但我希望背景图片是静态的（即，当您向下滚动时，它会停留在那儿，但其他所有东西都在移动）。如果您有任何建议，请告诉我。