title: Transparent arrow/triangle indented over an image
body: <p>I would like to make a <strong>transparent arrow over an image</strong>. This triangle should be indented in a semi transparent block and show the background image.</p>
  
  <p>Desired output:</p>
  
  <p><img src="https://i.stack.imgur.com/Yn7EK.jpg" alt="transparent indented CSS triangle"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="barShow"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <strong>transparent CSS Arrow</strong> should be transparent without color.</p>