title: How to have a non-rectangular div?
body: <p>With HTML/CSS, how to create a <strong>non-rectangular</strong> red container like this:</p>
  <p><a href="https://i.stack.imgur.com/ivpJh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ivpJh.png" alt="enter image description here" /></a></p>
  <p>which is basically a &quot;rectangle avoiding a top right rectangle&quot;:</p>
  <p><img src="https://i.stack.imgur.com/ZZPsJ.png" alt="" /></p>
  <p><strong>Is there another solution than having <code>float: right;</code> for the top right blue container?</strong></p>
  <p>Reason: I'm looking for other methods than <code>float: right</code> because of <a href="https://stackoverflow.com/questions/65383156/electron-title-bar-no-drag-and-drag-not-working">an Electron bug</a> that prevent clicks to be caught correctly on the top right blue container, when the red container is a &quot;draggable&quot; title bar for an app window.</p>
  <p>The following snippet works perfectly, but I'm looking for another solution without <code>float: right</code>:</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-js lang-js prettyprint-override"><code>for (var i = 0; i &lt; 50; i++)
  document.getElementById("topleft").innerHTML += "&lt;button&gt;xyz" + i + "&lt;/button&gt;";</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; }
  #topright { float: right; width: 100px; background-color: blue; -webkit-app-region: no-drag; }
  #topright:hover { background-color: black; }
  #topleft { background-color: red; -webkit-app-region: drag; padding: 10px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="topright" onclick="alert();"&gt;Click here!&lt;/div&gt;
  &lt;div id="topleft"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>