title: Outline inside clip-path
body: <p>I'm looking for a way to do this: 
  <a href="https://imgur.com/j7uMWwj.jpg" rel="nofollow noreferrer">https://imgur.com/j7uMWwj.jpg</a></p>
  
  <p>I add a clip-path to do the shield shape, but I just don't see how I can add this outline following the shape... Outlines or borders just do not follow shapes.</p>
  
  <p>I tried something like this :</p>
  
  <pre><code>.shield_mask{
      position: relative;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
      clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  
      &amp;:before{
          position: absolute;
          background-color: transparent;
          top: 12px; /* equal to border thickness */
          left: 12px; /* equal to border thickness */
          width: 327px; /* container height - (border thickness * 2) */
          height: 317px; /* container height - (border thickness * 2) */
          -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
          clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  
          -webkit-box-shadow:inset 1px 1px 0 0 #FFF;
          box-shadow:inset 1px 1px 0 0 #FFF;
      }
  }
  </code></pre>
  
  <p>Not working... I tried with gradients too...</p>
  
  <p>Does anyone have an idea ?</p>