title: How to create triangle shape in the top-right angle of another div to look divided by border
body: <p>I want to create shape like on this picture:</p>
  
  <p><img src="https://i.stack.imgur.com/nUh7G.png" alt="shape"></p>
  
  <p>I created triangle shape like on this pic, and set the margins to be in top right angle, but I don't know how to make it look divided from the left div like shown on picture. </p>
  
  <p>Do I have to "cut" left div to remain its grey border and to look divided from green triangle?</p>
  
  <p>Is there any idea how to do this? </p>
  
  <p>EDIT:</p>
  
  <ol>
  <li>I am using fixed navigation bar on page, so when I scroll if div is <code>position:absolute</code>, navigation bar goes behind div.</li>
  <li>Space between green triangle and rest of div should be transparent, because I am using image as page background.</li>
  </ol>