title: "cut" a div diagonally using css
body: <p>I'm trying to "cut" a div diagonally after some space. It's very difficult to explain. It should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Kb2ZW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kb2ZW.png" alt="diagonaldiv"></a></p>
  
  <p>As you cann see, there is a blue parent div in the back with a white child div inside. The white div will be the same width as the parent div, but it will be "cutted" diagonally after some pixels (e.g. after 100px). I never did something like this, but I thought it could maybe done in CSS3 using <code>transition</code> or <code>rotation</code> or something like this (I don't know, I'm not familiar with CSS3).</p>
  
  <p>I searched for diagonal divs but I only got results like <a href="https://stackoverflow.com/questions/20362666/how-to-create-a-div-with-a-diagonal-or-angled-top-line">this</a>. Unfortunately I know nothing to do with it. Is this even possible? Can you please give me some hints?</p>