title: html box with arrow inside
body: <p>A client is requesting boxes on his website that should appear like the one below</p>
  
  <p><img src="https://i.stack.imgur.com/8NiRl.jpg" alt="box appearance"></p>
  
  <p>as you can see, the box has a small arrow with a unique shape on the left hand side.</p>
  
  <p>I have tried everything and visited lots of links and i can't design it.</p>
  
  <p>the problem is, this box will have different sizes and that image should always be in the center of the box and should hide a portion of the border (as u can see)</p>
  
  <p>please help, i am all out of options here.</p>
  
  <p>Thank you,
  Yasser</p>