如何拥有non-rectangulardiv？

Question

使用HTML/CSS，如何像这样创建一个non-rectangular红色容器：

这基本上是一个“避免右上角矩形的矩形”：

除了右上角的蓝色容器 float: right; 之外，还有其他解决方案吗？

原因：我正在寻找 float: right 以外的其他方法，因为当红色容器是“可拖动”时，可以防止在右上角蓝色容器上正确捕获点击应用的标题栏 window.

以下代码片段完美无缺，但我正在寻找另一种没有 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>

Answer 1

终于！花了一点时间，但我相信这应该可以做到。

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>

如何拥有non-rectangulardiv？

How to have a non-rectangular div?

html

css

css-float

fluid-layout