重新定位/旋轉偽元素

Question

我有一個由代碼（.mask）創建的偽元素，它的positioned:absolute位於帶有背景圖像的div的底部。 這是為了使它看起來像在圖像底部有一個箭頭/指針。

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

我用background-color:red; 而不是使它更簡單的圖像

我在col-md-8上使用.mask 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>

我希望它指向左側而不是向下。 該代碼創建了兩個部分，這些部分排列成一條直線，使其看起來像被遮蓋的箭頭，我不相信它會自己創建箭頭。 （我沒有編寫此代碼，所以我不確定100％）。

注意：我之前已經問過這個問題幾次，給出的所有答案都讓我做一個箭頭並將其放在div之外。 由於我在div上使用的是背景圖片，而不是純色，因此我無法這樣做。

視覺輔助。 （紅色輪廓僅用於指示div邊框）

Answer 1

只需將位置（“左側”，“頂部”，...）和尺寸（“寬度”，“高度”）之類的東西旋轉90度即可，因此這些示例將變為“頂部”，“右側”，.. 。）和（“ height”，“ width”），相同的代碼仍然有效：

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>