Javascript 重新定位伪元素

我有下面的html/CSS，它在一个div的底部创建一个带有图像背景的元素

在div底部创建的形状

HTML

我的“mobile”jQuery下有这个代码。我希望形状在屏幕大小上旋转（“箭头/三角形”指向侧面）。但不知道如何重写代码来实现这一点

编辑

---

如果我理解正确，您需要箭头指向div底部的左/右？以下是所有解决方案：

（此外，您可以仅使用一个

伪元素

来创建箭头。）

.main{
背景：红色；
高度：50px；
位置：相对位置；
边缘底部：100px；
}
.阿罗{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
边框样式：实心；
左边距：-15px；
左：50%；
}
.底部{
底部：-30px；
边框宽度：30px 30px 0 30px；
边框颜色：红色透明；
}
.起来{
底部：-30px；
边框宽度：0 30px 30px 30px；
边框颜色：透明红色透明；
}
.左{
底部：-60px；
边框宽度：30px 30px 30px 0；
边框颜色：透明红色透明；
}
.对{
底部：-60px；
边框宽度：30px 0 30px 30px；
边框颜色：透明红色；
}

不完全确定是否使用mobile，但查看Seth建议的

rotate

和

transform

css功能，请参见MDN：我不是100%，我可以使用它的属性旋转此div。我在考虑重写它，使形状指向侧面（并将其置于.mask2下），您可以旋转元素，或更改其边框，使其指向所需的方向。还有，如果只是一个黑色部分，为什么要用图片作为背景呢？制作了一把小提琴，在希望链接开始工作之前还没有在这里张贴过小提琴

<div style="background-image:url('...');">
    <div class="mask"></div>
</div>

.mask:before {
    border-left: 0 none;
    border-right: 20px solid transparent;
    left: 0;
}

.mask:after {
    border-left: 20px solid transparent;
    border-right: 0 none;
    right: 0;
}

.mask:before, .mask:after {
    border-bottom: 20px solid #fff;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    width: 50%;
    box-sizing: border-box;
}

.mask {
    bottom: 0;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1000;
}