45 Degree Angle cut on divs
<p>I'm trying to cut out the top right corner of most of my div elements on my site. These divs are all different sizes. I'm trying to find a responsive way of doing this. I ran into this site here: <a href="http://bennettfeely.com/clippy/" rel="nofollow">http://bennettfeely.com/clippy/</a> which allows you to cut out a custom polygon shape. </p>

<p>Here is what I have so far: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
 width: 280px;
 height: 280px;
 background: #1e90ff;
 -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
}

/* Center the demo */
html, body { height: 100%; }
body {
   background-image: url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg');
 display: flex;
 justify-content: center;
 align-items: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>My question is I'm trying to read these clippings and find out how to make the perfect 45 degree angle cut off the top right corner. As of right now this polygon was created by me freehand. And I'm trying to see what percentages I would need to use to make the perfect 45 degree angle cut from the top right.</p>

<p>With the solution I will be adding the cutoff to most of my divs, buttons, and images.  </p>

<p>I found other ways of doing this on Stack Overflow using border-left and right with absolute position, but the problem is I need the div cutoff to be transparent because some of them have background images behind it.</p>

<p>Here is a JS Fiddle that's set up: <a href="https://jsfiddle.net/xyvz5z8m/1/" rel="nofollow">https://jsfiddle.net/xyvz5z8m/1/</a></p>