Html 如何将此CSS箭头设置为透明？

我试图得到这个结果：

下面是我现在的情况（我现在只想得到左边元素的结果）：

我试图让这个左箭头透明，但我找不到如何做到这一点

CSS代码：

.main_container .photo_container .mask a {
    color: #FFFFFF;
    font-size: 25px;
    position: relative;
}

.main_container .photo_container .mask a:first-child {
    border: 1px solid #FFFFFF;
    padding: 5px 11px 7px;
}

.main_container .photo_container .mask a:first-child::before {
    border-bottom: 7px solid transparent;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    content: "";
    display: inline-block;
    left: -8px;
    position: absolute;
    top: 20px;
}
.main_container .photo_container .mask a:first-child::after {
    border-bottom: 24px solid transparent;
    border-right: 25px solid #eee;
    border-top: 24px solid transparent;
    content: "";
    display: inline-block;
    left: -26px;
    position: absolute;
    top: -1px;
}

HTML代码：

<div class="photo_container">
    <img src="images/placeholder/car1.png" class="img-responsive" alt="" />
    <div class="mask">
        <a href=""><i class="fa fa-search"></i></a>
        <a href=""><i class="fa fa-link"></i></a>
    </div>
</div>

你能帮我吗？

如果你不介意的话，这很简单：

在现有元素之后制作一个伪元素，将其居中于正确的一侧，并将其旋转45度

70.71%的数字是使用

s

是正方形的边，而

q

是对角线得到的

.arrow
{
    border:             1px white;
    border-style:       solid solid solid none;
    position:           relative;
    width:              50px;
    height:             50px;
}

.arrow::after
{
    content:            "";
    display:            block;
    top:                50%;
    left:               0;
    position:           absolute;
    border:             1px white;
    border-style:       none none solid solid;
    width:              70.71%; /* the side of a square is 70.71% the length of it's diagonal */
    height:             70.71%;
    transform:          translate(-50%, -50%) rotate(45deg);
}

最后，我们可以更改显示的边框和绝对位置，以使箭头显示在所需的一侧：

正文
{
背景色：黑色；
填充：50px；
}
.arrow_左，
.阿罗，对
{
display:inline block；/*只是为了让它们彼此相邻*/
边框：1px白色；
位置：相对位置；
宽度：50px；
高度：50px；
}
.arrow_左{边框样式：实心无；}
.arrow_right{边框样式：实心无实心；}
.arrow_左：：之后，
.arrow_right：：之后
{
内容：“；
显示：块；
最高：50%；
位置：绝对位置；
边框：1px白色；
宽度：70.71%；/*正方形的边是其对角线长度的70.71%*/
身高：70.71%；
变换：平移（-50%，-50%）旋转（45度）；
}
.arrow_左：：后
{
左：0；
边框样式：无实体；
}
.arrow_right：：之后
{
左：100%；
边框样式：实心-实心-无；
}

如果您不介意使用，这非常简单：

在现有元素之后制作一个伪元素，将其居中于正确的一侧，并将其旋转45度

70.71%的数字是使用

s

是正方形的边，而

q

是对角线得到的

.arrow
{
    border:             1px white;
    border-style:       solid solid solid none;
    position:           relative;
    width:              50px;
    height:             50px;
}

.arrow::after
{
    content:            "";
    display:            block;
    top:                50%;
    left:               0;
    position:           absolute;
    border:             1px white;
    border-style:       none none solid solid;
    width:              70.71%; /* the side of a square is 70.71% the length of it's diagonal */
    height:             70.71%;
    transform:          translate(-50%, -50%) rotate(45deg);
}

最后，我们可以更改显示的边框和绝对位置，以使箭头显示在所需的一侧：

正文
{
背景色：黑色；
填充：50px；
}
.arrow_左，
.阿罗，对
{
display:inline block；/*只是为了让它们彼此相邻*/
边框：1px白色；
位置：相对位置；
宽度：50px；
高度：50px；
}
.arrow_左{边框样式：实心无；}
.arrow_right{边框样式：实心无实心；}
.arrow_左：：之后，
.arrow_right：：之后
{
内容：“；
显示：块；
最高：50%；
位置：绝对位置；
边框：1px白色；
宽度：70.71%；/*正方形的边是其对角线长度的70.71%*/
身高：70.71%；
变换：平移（-50%，-50%）旋转（45度）；
}
.arrow_左：：后
{
左：0；
边框样式：无实体；
}
.arrow_right：：之后
{
左：100%；
边框样式：实心-实心-无；
}

---

左侧的“箭头”不能是透明的，因为实际上它只是应用于方框1/4的实心边框

（请参见此说明如何实现css三角形效果。）

---

您可能需要使用图像，或者调整图形设计。

左侧的“箭头”不能是透明的，因为实际上它只是应用于方框1/4的实心边框

（请参见此说明如何实现css三角形效果。）

---

您可能需要使用图像，或者调整图形设计。

您尝试使用边框实现透明三角形。它不起作用。所以，让我们考虑一下实现我们想要的东西的其他方法。 我创建了一个简单的演示-任何三角形都是由两条线组成的（需要简单的三角知识） -我在css中使用了一些变量，所以在这种情况下我使用了手写笔——更喜欢阅读源代码，而不仅仅是编译结果。 我们为第一个图标创建一个伪元素。旋转它并计算新高度。而不是变换原点。简单

我们改变角度并重新计算cos（角度）

*，
*：之前，
*：之后{
框大小：继承；
}
html{
框大小：边框框；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景图像：url（“http://7-themes.com/data_images/out/2/6775415-beautiful-images.jpg");
背景尺寸：封面；
背景重复：无重复；
背景位置：0；
溢出：隐藏；
}
html，
身体{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
.图标{
宽度：50vmin；
高度：25V分钟；
显示器：flex；
}
.图标{
弹性：1；
边框颜色：当前颜色；
边框样式：实心；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体大小：calc（2vw+2vh+4vmin）；
颜色：#fff；
位置：相对位置；
}
.图标+.图标{
左边距：-1px；
}
.图标：第一种类型{
边框宽度：1px 1px 1px 0；
}
.图标：类型的最后一个{
边框宽度：1px 0 1px 1px；
}
.图标：类型的第一个：之前，
.图标：类型的第一个：之后，
.Icon:类型的最后一个：before，
.图标：类型的最后一个：之后{
内容：''；
位置：绝对位置；
保证金：自动；
颜色：继承；
背景色：当前颜色；
宽度：1px；
高度：calc（50%/0.866025404）；/*我们的角度是30度，所以公式是calc（50%/cos（角度））*/
}
.图标：类型的第一个：之前，
.图标：类型的第一个：之后{
左：0；
}
.图标：类型的第一个：之前{
排名：0；
变换：旋转（30度）；
变换原点：顶部；
}
.图标：类型的第一个：之后{
底部：0；
变换：旋转（-30度）；
变换原点：底部；
}
.Icon:类型的最后一个：before，
.图标：类型的最后一个：之后{
右：0；
}
.图标：类型的最后一个：之前{
排名：0；
变换：旋转（-30度）；
变换原点：顶部；
}
.图标：类型的最后一个：之后{
底部：0；
变换：旋转（30度）；
转换来源：bot