Как сделать непрямоугольный div?

С помощью HTML/CSS, как создать непрямоугольный красный контейнер следующим образом:

введите здесь описание изображения

который в основном представляет собой прямоугольник, избегающий верхнего правого прямоугольника:

Есть ли другое решение, кроме float: right; для верхнего правого синего контейнера?

Причина: я ищу другие методы, кроме float: right из-за Ошибка Electron, которая препятствует правильному захвату кликов в верхнем правом синем контейнере, когда красный контейнер является перетаскиваемой строкой заголовка для окна приложения.

Следующий фрагмент работает отлично, но я ищу другое решение без 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>


html css fluid-layout css-float
person Basj    schedule 29.12.2020    source источник
comment
Можете ли вы полностью расположить синий элемент внутри красного элемента и все еще работает?   -  person hungerstar    schedule 29.12.2020
comment
У вас есть jsfiddle для этого @hungerstar? Я попытаюсь, но я подозреваю, что это будет связано с той же ошибкой Electron (которую я упомянул в своем вопросе).   -  person Basj    schedule 29.12.2020
comment
Что-нибудь подобное этому. Прямо сейчас кнопки не видят синий элемент, потому что он абсолютно позиционирован. Вы можете исправить это, хотя и немного хакерски, включив исходный плавающий элемент (сделайте его визуально невидимым) .   -  person hungerstar    schedule 29.12.2020
comment
Я не знаком с Electron, но я предполагаю, что есть способ реагировать на событие JS в перетаскиваемом элементе, который затем позволит вам инициировать клики по синему элементу.   -  person hungerstar    schedule 29.12.2020
comment
@hungerstar Ваш второй jsfiddle действительно является решением для stackoverflow.com/questions/65383156/! Можете ли вы опубликовать это там, и я приму это?   -  person Basj    schedule 29.12.2020
comment
@Vickel в этом вопросе здесь, я в первую очередь ищу общее решение HTML/CSS, а не специфичное для Electron.   -  person Basj    schedule 29.12.2020
comment
По сути, НЕТ. Все элементы HTML представляют собой прямоугольники.   -  person Paulie_D    schedule 29.12.2020

Ответы (1)


arrow_upward
0
arrow_downward

в конце концов! это заняло немного времени, но я считаю, что это должно сделать это.

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>

person DCR    schedule 29.12.2020
comment
обновленный ответ. это работает для вас? - person DCR; 29.12.2020
comment
затем используйте гибкие и адаптивные размеры - person DCR; 30.12.2020
comment
ответ обновлен. счастливого Рождества! - person DCR; 30.12.2020
comment
извините, но у вас закончились жетоны. В следующий раз задавайте полный вопрос вместо того, чтобы просить корректировки на каждой итерации. - person DCR; 30.12.2020
comment
хорошо, вы получаете дополнительные жетоны. Обновленное решение. Теперь счастливого нового года! - person DCR; 30.12.2020
comment
это дает вам физический макет, но вам придется использовать js для изменения содержимого промежутков - person DCR; 30.12.2020
comment
хорошо, добавил js, чтобы получить xyz в правильном порядке. Тебе должно быть хорошо идти. - person DCR; 30.12.2020
comment
Большой. Спасибо, что приняли. Хотелось бы увидеть более простой способ. - person DCR; 30.12.2020
comment
@Basj где любовь? опубликуйте более простой метод, спасибо - person DCR; 31.12.2020
comment
Спасибо @DCR. Альтернативой является jsfiddle.net/r1w6bvnc/1, float действительно не используется для синего контейнера, но только для фиктивного невидимого контейнера. Всего наилучшего в новом году. - person Basj; 31.12.2020
comment
Мне это нравится! Но вы используете float для интервала, что, я думаю, нормально. - person DCR; 31.12.2020