Css 图像上缩进的透明箭头/三角形

我想在图像上方制作一个透明箭头。该三角形应缩进半透明块中，并显示背景图像

期望输出：

.barShow{
背景色：#000；
不透明度：0.5；
}
巴秀：以前{
最高：0%；
左：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
边框顶部颜色：#999；
边框宽度：20px；
左边距：-20px；
}

---

有几种方法可以使用CSS在图像上制作一个透明箭头。我将描述的两种方法涉及伪元素以最小化标记，并具有相同的输出。您还可以在回答的最后看到SVG方法：

箭头周围黑色部分上的透明效果由允许透明的。但是如果愿意，可以在伪元素上使用不透明度

---

1.SkewX（） 您可以对两个伪元素使用CSS3

skewX（）

属性来生成透明箭头。这种方法的主要优点是透明箭头可以响应，但它也允许您在黑色形状和traingle周围放置边框

形状的响应性是通过

padding bottom

属性来实现的，以保持其纵横比（描述了此技术）

.wrap{
位置：相对位置；
溢出：隐藏；
宽度：70%；
保证金：0自动；
}
.包裹img{
宽度：100%；
高度：自动；
显示：块；
}
.阿罗{
位置：绝对位置；
底部：0；
宽度：100%；
垫底：3%；
背景色：rgba（0,0,0,0.8）；
}
.阿罗：以前，
.阿罗：之后{
内容：''；
位置：绝对位置；
底部：100%；
宽度：50%；
填充底部：继承；
背景色：继承；
}
.阿罗：以前{
右：50%；
-ms变换原点：100%100%；
-webkit转换来源：100%100%；
变换原点：100%100%；
-ms变换：skewX（45度）；
-webkit变换：skewX（45度）；
变换：skewX（45度）；
}
.阿罗：之后{
左：50%；
-ms变换原点：0.100%；
-webkit转换来源：0 100%；
变换原点：0.100%；
-ms变换：skewX（-45度）；
-webkit变换：skewX（-45度）；
变换：skewX（-45度）；
}

简单方法

• 将伪元素与

  框阴影

  和

  变换：旋转（）一起使用
  

• 添加

  溢出：隐藏至主分区
  

片段：

正文{
保证金：0；
填充：0；
背景：url(http://i.imgur.com/EinPKO3.jpg);
背景尺寸：封面；
}
div{
高度：100px；
宽度：100%；
位置：绝对位置；
底部：0；
溢出：隐藏；
}
部门：以前{
位置：绝对位置；
顶部：-50px；
左：计算（50%-35px）；
内容：“；
高度：50px；
宽度：50px；
背景：透明；
-webkit转换来源：0%100%；
-moz变换原点：0%100%；
-ms变换原点：0%100%；
变换原点：0%100%；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
盒影：0.5000px rgba（0,0,0,0.6）；
}

---

这里有一个使用CSS的解决方案，它不会使包装器溢出

.wrap{
位置：相对位置；
宽度：480px；
高度：270px；
背景图片：url(http://placehold.it/480x270);
}
.包装：之后{
内容：“；
显示：块；
位置：绝对位置；
左：0；
右：0；
底部：0；
高度：50px；
背景色：rgba（0,0,0,0.7）；
-webkit剪辑路径：多边形（0 0，计算（50%-30px）0，50%50%，计算（50%+30px）0，100%0，100%100%，0 100%）；
-moz剪辑路径：多边形（0 0，计算（50%-30px）0，50%50%，计算（50%+30px）0，100%0，100%100%，0 100%）；
剪辑路径：多边形（0 0，计算（50%-30px）0，50%50%，计算（50%+30px）0，100%0，100%100%，0 100%）；
}

---

我们可以使用线性渐变来实现这一点。没有伪元素。我使用了一些CSS变量来轻松控制一切。这是更灵活的

.a{
/*您可以更改这些变量*/
--箭头宽度：20px；
--rgba:rgba（0,0,0,0.5）；
--底部高度：50px；
宽度：100%；
高度：300px；
背景：线性梯度（向右，var（--rgba）0 calc（50%-var（--箭头宽度）），透明calc（50%-var（--箭头宽度））calc（50%+var（--箭头宽度）），var（--rgba）0 calc（50%+var（--箭头宽度）*2））0 calc（100%-var（--底部高度））/100%var（--箭头宽度），
线性梯度（至右下角，透明0.50%，var（--rgba）50.1%100%）计算（50%+（var（--箭头宽度）/2））计算（100%-var（--底部高度））/var（--箭头宽度）var（--箭头宽度），
线性梯度（至左下角，透明0.50%，var（--rgba）50.1%100%）计算（50%-（var（--箭头宽度）/2））计算（100%-var（--底部高度））/var（--箭头宽度）var（--箭头宽度），
线性梯度（var（--rgba），var（--rgba））0 100%/100%计算值（var（--底部高度）），
网址(https://picsum.photos/id/600/360)50%50%/套；
背景重复：无重复；
}

---

回答得很好。