重新定位/旋转伪元素(Re

重新定位/旋转伪元素(Re-positioning/rotating a pseudo element)

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

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>

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

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

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

I have a pseudo element(s) being created by code (.mask), and it's positioned:absolute at the bottom of a div with a background image. This is to make it look like there is an arrow/pointer at the bottom of the image.

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

I used background-color:red; instead of an image to make it simpler

I use .mask div on col-md-8 (Bootstrap 3 used to make two columns)

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>

I want it to point to the left instead of down. The code creates the two pieces which line up to make it look like a masked out arrow, I don't believe it creates the arrow itself. (I did not write this code so I'm not 100% sure).

NOTE: I have asked this question a few times before, and all the answers given have me making an arrow and placing it outside the div. Since I am using a background-image on the div and not a solid colour, I cannot do that.

visual aid. (red outlines just used to indicate div borders)

最满意答案

只需要取位置（“左”，“顶”，......）和尺寸（“宽度”，“高度”）并将它们旋转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> 
  
 
Just take things like positions ("left", "top", ...) and dimensions ("width", "height") and rotate them by 90 degrees, so these examples become "top", "right", ...) and ("height", "width"), and the same code still works:
 
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>