Перекрывающиеся строки с помощью HTML / CSS - PullRequest
Новая
       31

Перекрывающиеся строки с помощью HTML / CSS

0 голосов
/ 03 мая 2018

Каков наилучший и самый чистый способ сделать этот макет с помощью html / css?

enter image description here

То, что я имею до сих пор, это https://codepen.io/sigug/pen/VxWJoJ Но это 1) извилистая / не "чистая" и 2) на самом деле не работает, потому что здесь уже выглядит иначе, чем на codepen. Спасибо за любую помощь .. 

body { background: #ff00c6; width: 100vw; height: 100vh; }

#icons { margin: auto auto; height: 10vh; border: 1px solid white; text-align: center; }
.icon {
  float: left;
}

.small { width: 1vw; p}

.large { width: 2vw; }
<div id="icons">
  
<div class="icon" style="position: relative; left: 85px; top: -10px; "><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>

<div class="icon" style="position: relative; left: 105px; top: -10px; "><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>

<div class="icon" style="position: relative; left: 125px; top: -10px;"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>
  
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
  <div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>

</div>

1 Ответ

0 голосов
/ 03 мая 2018

Старайтесь, чтобы ваш код был расширяемым и читаемым, поэтому, если вы позже захотите добавить, например, больше строк, вы можете легко это сделать, только изменив HTML-разметку. Возможно, мое решение не на 100% точно, но я постараюсь дать вам представление о том, как реализовать этот макет. 

var rows = document.getElementsByClassName('row');
for(var i = 1; i < rows.length; i++) {
  rows[i].style.transform='translate(0,-' + i + 'vw)';
}
body {background:#ff00c6;width:100vw;height:100vh;}
#icons {border:1px solid white;}
.icon {float:left;width:2vw;height:2vw;background:url('https://image.ibb.co/jDaNTn/icon_notice.png') center center no-repeat;background-size:contain;}
.row {width:100%;height:2vw;}
.small .icon {background-size:50%}
.small .icon:first-child {margin-left:1vw;}

/* EDIT: JS solution
.row:nth-child(2) {transform:translate(0,-1vw);}
.row:nth-child(3) {transform:translate(0,-2vw);}
... */
<div id="icons">
  <div class="small row">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </div>
  <div class="big row">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </div>
  <div class="small row">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </div>
</div>

EDIT:

Отредактировал пост, используя трансформации, вы можете получить желаемый эффект. Однако, таким образом, вам также нужно отредактировать CSS, потому что вам нужно добавить еще перевод в каждую строку (-1vw, -2vw, -3vw и т. д. на...). Может быть, лучше рассчитать их с помощью JavaScript или PHP.

Предоставлено решение JS

...