title: How can I create Octagonal mask in CSS
body: <p>I am trying to create a design in which images are octagonal in shape. I used the border hack, but the image needs to be inside the octagon shape. Using pesudo-elements is not apt in this case as the body will also have its own background image. Is it possible with css?</p>
  
  <p><img src="https://i.stack.imgur.com/z4NFF.png" alt="enter image description here"></p>
  
  <p><strong>My Code</strong></p>
  
  <p><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>div {
   width: 100vh;
   height: 100vh;
   background: gold;
   position: relative;
  }
  
  div:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   border-bottom: 29vh solid gold;
   border-left: 29vh solid white;
   border-right: 29vh solid white;
   width: 42vh;
   height: 0;
  }
  
  div:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   border-top: 29vh solid gold;
   border-left: 29vh solid white;
   border-right: 29vh solid white;
   width: 42vh;
   height: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wanted this image to be in the golden area : <a href="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" rel="nofollow noreferrer">http://images.visitcanberra.com.au/images/canberra_hero_image.jpg</a> . Also, i used vh so that it is responsive to window height.</p>