Javascript 重写伪元素horiz。垂直

我有一段代码，它在div的底部创建一个元素，作为向下的“箭头/指针”

我需要把它写得“箭头/指针”指向左边

当前代码-

HTML

掩码css处于混乱状态

我尝试过将“底部”值更改为“左侧”值等，但无法使其工作

代码创建两个黑色形状，它们充当div底部的“掩蔽”

到这里，生成您自己的三角形css。这比您当前使用的代码简单得多

使用

border-width: 100px 100px 100px 0;
border-color: transparent red transparent transparent;

---

将创建所需的三角形效果，您可以对页面进行调整，使其恰到好处

尝试在

添加。indx img

transform:rotate(90deg);

在

.mask

left: 10%;

---

.indx img{
位置：相对位置；
填充：16%0；
背景色：红色；
变换：旋转（90度）；
}
.面具：以前{
左边框：0无；
右边框：20px实心透明；
左：0；
}
.面具：之后{
左边框：20px实心透明；
右边界：0无；
右：0；
}
.面具：之前，
.面具：之后{
边框底部：20px实心#fff；
内容：“；
显示：块；
身高：0；
位置：绝对位置；
排名：0；
宽度：50%；
框大小：边框框；
}
.面具{
底部：0px；
高度：20px；
左：10%；
位置：绝对位置；
宽度：100%；
z指数：1000；
}

正文{
右边距：50px；
左边距：50像素；
}
.箭盒{
位置：相对位置；
背景：#FF0000；
边框：4px实心#FF0000；
高度：150像素；
}
.箭头框：在，
.箭头框：在{
右：100%；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.箭头框：在{
边框颜色：rgba（255,0,0,0）；
右边框颜色：#FF0000；
边框宽度：30px；
利润上限：-30px；
}
.箭头框：在{
边框颜色：rgba（255,0,0,0）；
右边框颜色：#FF0000；
边框宽度：36px；
利润上限：-36px；
}

如何将其应用于我的代码？我需要把“三角形”遮掩起来，而不是创建。用图像编辑我的问题。我想你误解了我要找的，我需要div边上的箭头指向左边。我相信我的代码添加了一个带有箭头的条，箭头被切掉并放在底部。我需要把它旋转到一边。我不需要一个三角形把我的问题和图像联系起来我想也许我问错了。我不想创建箭头/三角形。这需要掩盖。箭头在div内。我的代码在箭头外创建条，而不是箭头本身。此代码创建一个箭头并将其置于div之外

left: 10%;