title: CSS3 Triangle/cut-out Border
body: <p>I'm wondering if there's an "easy" way to do something like below using CSS3, I want to avoid using images and absolute positioning, or similar, and would prefer to use some CSS method to achieve this.</p>
  
  <p><img src="https://i.stack.imgur.com/T8Aqb.jpg" alt="enter image description here"></p>
  
  <p>I would also like to avoid using any fixed heights for this style too, since I'll be using the same style on various elements that all vary in size and colour.</p>