title: Shadows on three sides only with multiple inset box-shadows and alpha transparency
body: <p>The goal is to have an element with a sublte inset <code>box-shadow</code> where the bottom edge is not affected by any shadow. I tried playing around with the values of the shadow but no luck.</p>
  
  <p>To matters worse, the colors have transparency which means that I cannot simply overlap the triangle with the element as to hide the line of the shadow. Any ideas?</p>
  
  <p><img src="https://i.stack.imgur.com/nenTn.png" alt="enter image description here"> <img src="https://i.stack.imgur.com/Usdc4.jpg" alt="enter image description here"><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav {
    background-color:rgba(0, 0, 0,.5);
  }
  .item {
    display:inline-block; margin-left:100px;
    position:relative; border-left: rgba(0,0,0,.8); border-right: rgba(0,0,0,.8);
    padding:5px 30px; background-color:rgba(10,36,53,.1);
    box-shadow: inset 0 10px 20px 2px rgba(10,36,53,.1),
      inset 0px 0px 3px rgba(0,0,0,.1),
      inset  0px 0px 3px rgba(0,0,0,.1);
  }
  
  .triangle {
    border-top: 15px solid rgba(2,7,10,.55);
    border-left: 15px solid transparent; border-right: 15px solid transparent;
    position: absolute; bottom: -15px;
    margin-left: -15px; left:50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
    &lt;div class="item"&gt;
      Hello World
      &lt;div class="triangle"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>