相关疑难解决方法(0)

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

期望的输出:

.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;
}

<div class="barShow"></div>

该透明CSS箭应该是没有颜色的透明.

我有这个问题,我无法弄清楚如何使箭头透明.

所以基本上我只是用:after做一个border与这些值来做出一个箭头.但我想要的是使箭头透明,这样你就可以看到背景图像,这是header标签中的背景图像.

CSS:

html,body {
    width:100%;
    height:auto;
    font-family:'open-sans', sans-serif;
}
header {width:100%;}
main {
    width:100%;
    min-height:50vh;
    position:relative;
}
main:after {
    top:0;
    left:50%;
    border:solid transparent; 
    content:""; 
    height:0; 
    width:0; 
    position:absolute; 
    border-color: rgba(0, 0, 0, 0); 
    border-top-color:#2a2a2a; 
    border-width:60px; 
    margin-left: -60px;
}

HTML:

    <header class="bg__header">
    </header>
    <main>
        <article></article>
    </main>

小提琴

这里是我想要实现的一个很好的例子: