How to have a non-rectangular div?

Question

With HTML/CSS, how to create a non-rectangular red container like this:

which is basically a "rectangle avoiding a top right rectangle":

Is there another solution than having float: right; for the top right blue container?

Reason: I'm looking for other methods than float: right because of an Electron bug that prevent clicks to be caught correctly on the top right blue container, when the red container is a "draggable" title bar for an app window.

The following snippet works perfectly, but I'm looking for another solution without float: right:

for (var i = 0; i < 50; i++)
document.getElementById("topleft").innerHTML += "<button>xyz" + i + "</button>";

* { 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; }

<div id="topright" onclick="alert();">Click here!</div>
<div id="topleft"></div>

Can you absolutely position the blue element within the red element and have things still work? — hungerstar, Dec 29 '20 at 18:45
Would you have a jsfiddle for this @hungerstar? I'll try but I suspect it will get caught in the same Electron bug (that I linked in my question). — Basj, Dec 29 '20 at 18:47
Something [like this](https://jsfiddle.net/r1w6bvnc/). Right now, the buttons cannot "see" the blue element because it is absolutely positioned. You could fix it, albeit slightly hacky, by including the [original floated element (make it visually invisible)](https://jsfiddle.net/r1w6bvnc/1/). — hungerstar, Dec 29 '20 at 18:55
I'm not familiar with Electron, but I'm guessing there's a way to respond to a JS event on the draggable element that would then allow you to trigger clicks on the blue element. — hungerstar, Dec 29 '20 at 18:58
@hungerstar Your second jsfiddle IS the solution indeed for https://stackoverflow.com/questions/65383156/electron-title-bar-no-drag-and-drag-not-working! Can you post it there and I'll accept it? — Basj, Dec 29 '20 at 19:18
@Vickel in this question here, I'm primarily looking for a general HTML/CSS solution, not Electron-specific. — Basj, Dec 29 '20 at 19:20

DCR · Accepted Answer · 2020-12-30T02:21:40.977

finally! it took a little doing but I believe this should do it.

function myFunction2(){
alert('i was clicked')
}



function myFunction(){

   for (let i = 0; i < 50; i++){
      let x = 'a0' + i      
      let id = 'a' + (x).slice(-2)
       
       document.getElementById(id).innerHTML = 'xyz' +i;
      
   }



   var end = 0;
   var count = 0;
   var left =[];

   for (let i = 0; i < 25;i++){
      let y = 30 + i*20;
     
      let temp = document.elementFromPoint(18, y); 
       
      if (document.elementFromPoint(18, y)==null)return; 
      if (temp.tagName != 'SPAN')break;
      
   
      let inner = temp.innerHTML;
      let inArray = inner.split('z')
      var start = parseInt(inArray[1]);
      left.push(start)
    }  
    left[left.length-1] = 50
 
    for (var i = 0;i  < left.length;i++){
 
       for(let j = left[i]; j >= end; j--){
          let x = 'a0' + j      
          let id = 'a' + (x).slice(-2)
      
          if (document.getElementById(id) != null)
          document.getElementById(id).innerHTML = 'xyz' + count;
          count++;
          
      
       }
      end = left[i]+1
   
   
    }

 } window.addEventListener('resize', myFunction);

div{
margin:0;padding:0;
}


#better{
margin-top:20px;
display:block;
background:green;

width:100%;
position:relative;
padding:10px;
}

#abs{
display:inline-flex;
justify-content:center;
position:absolute;
background:blue;
height:30px;
width:100px;
top:0%;
right:0%;
}

span{
background:white;
border:solid 1px grey;
display:inline-block;
font-size:16px;
}

#fx{
display:flex;
flex-flow: row-reverse wrap;
justify-content:flex-end;
}

#x{
width:100px;
visibility:hidden;
}

<html>
<body >
<div id='better' >
<div id='fx'>
<span id='x'></span>

<span id='a00'>xyz0</span><span id='a01'>xyz1</span><span id='a02'>xyz2</span><span id='a03'>xyz3</span><span id='a04'>xyz4</span><span id='a05'>xyz5</span><span id='a06'>xyz6</span><span id='a07'>xyz7</span><span id='a08'>xyz8</span><span id='a09'>xyz9</span><span id='a10'>xyz10</span><span id='a11'>xyz11</span>

<span id='a12'>xyz12</span><span id='a13'>xyz13</span><span id='a14'>xyz14</span><span id='a15'>xyz15</span><span id='a16'>xyz16</span><span id='a17'>xyz17</span><span id='a18'>xyz18</span><span id='a19'>xyz19</span><span id='a20'>xyz20</span><span id='a21'>xyz21</span><span id='a22'>xyz22</span><span id='a23'>xyz23</span>

<span id='a24'>xyz24</span><span id='a25'>xyz25</span><span id='a26'>xyz26</span><span id='a27'>xyz27</span><span id='a28'>xyz28</span><span id='a29'>xyz29</span><span id='a30'>xyz30</span><span id='a31'>xyz31</span><span id='a32'>xyz32</span><span id='a33'>xyz33</span><span id='a34'>xyz34</span><span id='a35'>xyz35</span>

<span id='a36'>xyz36</span><span id='a37'>xyz37</span><span id='a38'>xyz38</span><span id='a39'>xyz39</span><span id='a40'>xyz40</span><span id='a41'>xyz41</span><span id='a42'>xyz42</span><span id='a43'>xyz43</span><span id='a44'>xyz44</span><span id='a45'>xyz45</span><span id='a46'>xyz46</span><span id='a47'>xyz47</span>

<span id='a48'>xyz48</span><span id='a49'>xyz49</span><span id='a50'>xyz50</span>
</div>
<div id='abs'>
<button type='button' onclick='myFunction2()'>Click me!</button>
</div>
</div>
</body>
</html>

sorry, but you have run out of tokens. Next time ask a complete question instead of asking for adjustments on each iteration — DCR, Dec 29 '20 at 21:57
ok, you get extra tokens. Updated solution. Now have a a happy new year! — DCR, Dec 29 '20 at 22:38
this get's you the physical layout but you'll have to use js to change the contents of the spans — DCR, Dec 29 '20 at 23:12
ok, added the js to get the xyz's in the correct order. You should be good to go. — DCR, Dec 30 '20 at 01:36
Great. Thanks for accepting. Would love to see an easier way. — DCR, Dec 30 '20 at 16:56
Thank you @DCR. https://jsfiddle.net/r1w6bvnc/1/ is an alternative, `float` is indeed not used for the blue container, but only for a dummy non-visible container. All the best for the new year. — Basj, Dec 31 '20 at 09:02
I like it! But you are using float for spacing which I guess is alright. — DCR, Dec 31 '20 at 19:05

How to have a non-rectangular div?

1 Answers1