我想在图像上做一个透明的箭头.此三角形应缩进半透明块并显示背景图像.
期望的输出:

.barShow {
background-color: #000;
opacity: 0.5;
}
.barShow:before {
top: 0%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #999;
border-width: 20px;
margin-left: -20px;
}Run Code Online (Sandbox Code Playgroud)
<div class="barShow"></div>Run Code Online (Sandbox Code Playgroud)
该透明CSS箭应该是没有颜色的透明.
我正在尝试创建一个效果,我在CSS3中的任何图像上方都有一个透明箭头.请参见下图.

有什么想法怎么做这个效果?如果有任何帮助,请使用LESS.