title: Cutting a triangle out of div, BUT have it horizontally centered
body: <p>Sorry if this has been answered but I can't find it anywhere!! </p>
  
  <p>I need a transparent triangle cut out of a white div (to form a down arrow), I get that it could be css shapes to do it, but the thing I'm stumped on is how to create two 100% width white blocks on either side...</p>
  
  <p>Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/DlF8a.png" alt="enter image description here"></p>
  
  <p>Any help would be great.</p>
  
  <p>Many thanks</p>