Javascript 重新定位/旋转伪元素

我用代码（.mask）创建了一个伪元素，它位于一个带有背景图像的div的底部。这是为了使它看起来像在图像底部有一个箭头/指针

我用了

背景色：红色而不是图像，使其更简单

我在
col-md-8
上使用
.mask
div（引导程序3用于生成两列）

HTML:


文本

我希望它指向左边，而不是向下。这段代码创建了两条线，使其看起来像一个隐藏的箭头，我不相信它创建了箭头本身。（我没有写这段代码，所以我不是100%确定）

注意：我以前问过几次这个问题，给出的所有答案都要求我制作一个箭头并将其放在div外。因为我在div上使用的是背景图像，而不是纯色，所以我不能这样做

视觉辅助。（红色轮廓仅用于指示div边框）

只需将位置（“左”、“上”、“下”）和尺寸（“宽”、“高”）等元素旋转90度，这样这些示例就变成了“上”、“右”、“下”）和（“高”、“宽”），同样的代码仍然有效：



.indx img{
位置：相对位置；
填充：16%0；
背景图片：url(http://susancorso.com/seedsforsanctuary/wp-content/uploads/2013/04/box_placeholder.jpg);
}
.面具：以前{
边界顶部：0无；
边框底部：20px实心透明；
排名：0；
}
.面具：之后{
边框顶部：20px实心透明；
边框底部：0无；
底部：0；
}
.mask:之前，.mask:之后{
左边框：20px实心#000；
内容：“；
显示：块；
宽度：0；
位置：绝对位置；
右：0；
身高：50%；
框大小：边框框；
}
.面具{
左：0；
宽度：20px；
排名：0；
位置：绝对位置；
身高：100%；
z指数：1000；
}

也许你可以给我们看一张设计图，看看它应该是什么样子……只需插入一张背景图，就可以看到箭头确实是图像的延续，而不仅仅是一个彩色三角形。如果不希望遮罩本身可见，则应在问题中指定。（但我想不出一种方法来处理大小不确定的图像。即使已知大小，这项任务也可能超出其本身的价值）我在我的帖子中添加了一个视觉辅助工具。代码并没有生成三角形，而是生成了两条用于表示三角形的条。所以它就像一个maskSo，我们实际上不需要旋转一个伪元素。只要告诉它它的新属性，你就都准备好了。没错！（每隔一个线程建议我旋转图像，等等）我尝试切换值和属性，但就是无法得到。我会尽快尝试你的代码，看起来不错。干杯很高兴听到：）请记住，如果您希望为其他容器保留旧的行为，您可能希望为希望显示异常的容器分配一个类，并覆盖重要的值：这就是我想要的，但遇到了问题。我想保留mobile的原始.mask值（容器堆叠，所以箭头需要缩进），并使用您的代码显示屏幕。我刚刚在mediaQuery中输入了原始代码，但有东西把对齐搞砸了。需要重置某些值或其他内容我用注释更新了fiddle，以清楚地标记允许“左”类对象使用左箭头而不更改其他对象的部分。如果您仍然遇到问题，可能您分配的类附加了一些其他规则（如果您字面上使用了“左”。为了安全起见，您可以将这些规则替换为“左掩码箭头”）
<div class="row">
    <div class="col-md-8" style="background-image:url('...');">
        <div class="mask">
    </div>

    <div class="col-md-4">
        <h1>text</h1>
    </div>
</div>