CSSを使用したレスポンスジグザグレイアウト？

Question

レスキュースネーク/ジグザグレイアウトを作成します。 コンテナの中央から下に向かって四角いイメージとサークルのパスです。

要素の数は不明であり、サーバーデータによって決まります。

純粋なCSSを使用してこれを達成するにはどうすればよいですか？私は非常に複雑なハック（codepenを）出てきました

<div class="container"> 
    <div class="square"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="square"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="square"></div> 
/<div> 

Full Codepen

Answer 1

：

はここで可能なコードです。しかし、実際にはこれを生産には望んでいません。それは3つの「ホップ」（すなわち、要素の流れが左から右に行き、跳ね返り、左に戻り、再び跳ね返り、永遠の空に行き、決して再び見ることはできません）のためだけに機能します。

ハックは、次のように動作します。まず、各要素を「ホップ」ごとに移動する必要がある左からの位置を計算します。最初のホップのために、それは$i * 50px'S（$i要素の0から始まるインデックスである）、第二のためには、100vw - ($i * 50px - 100vw) == 200vw - $i * 50px（100vwウィンドウ幅で、$i * 50px - 100vwは、右画面境界に対する要素の相対的な位置である）です、そして第三の$i * 50px - 200vwです。

max(min($first, $second), $third)を計算する必要があります。残念ながら、CSS calc()機能はそれを許可していませんので、代わりに私たちは数字の前に特別な要素を配置：

.spacer { 
    display: inline-block; 
    max-width: 50px; /* first */ 
    min-width: 500px; /* third */ 
} 

.spacer > span { 
    display: inline-block; 
    max-width: 300px; /* second */ 
    width: 10000px; 
} 

（あなたは別のcodepenにこのスペーサー事で遊ぶことができます。）再び

、この非常に複雑で遅い解決策なので、JavaScriptを実際に使用する方がよいでしょう（誰かが実際に動作するようなもっと巧妙なCSSだけを発明しない限り）。