重新定位/旋转伪元素

Question

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

https://jsfiddle.net/hunt0194/gu1sgotd/3/

我使用background-color:red;代替图片来简化

我在.mask上使用col-md-8 div（Bootstrap 3用于制作两列）

HTML：

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

我希望它指向左而不是向下。代码创建了两个排成一行的部分，使它看起来像一个蒙面箭头，我不相信它会创建箭头本身。 （我没有写这段代码，所以我不是百分百肯定的。）

注意：我之前已经问了几次这个问题，并且给出的所有答案都让我制作一个箭头并将其放在div之外。由于我在div上使用背景图像而不是纯色，我不能这样做。

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

Answer 1

只需要取位置（“左”，“顶”，......）和尺寸（“宽度”，“高度”）并将它们旋转90度，这些示例变为“顶部”，“正确” ，...）和（“高度”，“宽度”），相同的代码仍然有效：

https://jsfiddle.net/svArtist/5zoL1rrg/

.indx-img {
	position: relative;
	padding: 16% 0;
	background-image:url(http://susancorso.com/seedsforsanctuary/wp-content/uploads/2013/04/box_placeholder.jpg);
}

.mask:before {
    border-top: 0 none;
    border-bottom: 20px solid transparent;
    top: 0;
}
.mask:after {
    border-top: 20px solid transparent;
    border-bottom: 0 none;
    bottom: 0;
}
.mask:before, .mask:after {
    border-left: 20px solid #000;
    content: " ";
    display: block;
    width: 0;
    position: absolute;
    right: 0;
    height: 50%;
    box-sizing: border-box;
}
.mask {
    left: 0;
    width: 20px;
    top: 0;
    position: absolute;
    height: 100%;
    z-index: 1000;
}

<div class="indx-img">
  	<div class="mask"></div>
</div>