どうも！LSSです！！
CSSのbackgroundプロパティを使って様々な絵を描くのを試みてきましたが、ここで「迷路の描画をbackgroundだけで出来るか？」をやろうと…し始めてみました。
まず格子状に壁を配置
コード
<style>
.test{
width:300px;height:300px;
background:
linear-gradient(black,black) 5px 0px/54px 5px ,
linear-gradient(black,black) 64px 0px/54px 5px ,
linear-gradient(black,black) 123px 0px/54px 5px ,
linear-gradient(black,black) 182px 0px/54px 5px ,
linear-gradient(black,black) 241px 0px/54px 5px ,
linear-gradient(black,black) 5px 59px/54px 5px ,
linear-gradient(black,black) 64px 59px/54px 5px ,
linear-gradient(black,black) 123px 59px/54px 5px ,
linear-gradient(black,black) 182px 59px/54px 5px ,
linear-gradient(black,black) 241px 59px/54px 5px ,
linear-gradient(black,black) 5px 118px/54px 5px ,
linear-gradient(black,black) 64px 118px/54px 5px ,
linear-gradient(black,black) 123px 118px/54px 5px ,
linear-gradient(black,black) 182px 118px/54px 5px ,
linear-gradient(black,black) 241px 118px/54px 5px ,
linear-gradient(black,black) 5px 177px/54px 5px ,
linear-gradient(black,black) 64px 177px/54px 5px ,
linear-gradient(black,black) 123px 177px/54px 5px ,
linear-gradient(black,black) 182px 177px/54px 5px ,
linear-gradient(black,black) 241px 177px/54px 5px ,
linear-gradient(black,black) 5px 236px/54px 5px ,
linear-gradient(black,black) 64px 236px/54px 5px ,
linear-gradient(black,black) 123px 236px/54px 5px ,
linear-gradient(black,black) 182px 236px/54px 5px ,
linear-gradient(black,black) 241px 236px/54px 5px ,
linear-gradient(black,black) 5px 295px/54px 5px ,
linear-gradient(black,black) 64px 295px/54px 5px ,
linear-gradient(black,black) 123px 295px/54px 5px ,
linear-gradient(black,black) 182px 295px/54px 5px ,
linear-gradient(black,black) 241px 295px/54px 5px ,
linear-gradient(black,black) 0px 5px/5px 54px ,
linear-gradient(black,black) 0px 64px/5px 54px ,
linear-gradient(black,black) 0px 123px/5px 54px ,
linear-gradient(black,black) 0px 182px/5px 54px ,
linear-gradient(black,black) 0px 241px/5px 54px ,
linear-gradient(black,black) 59px 5px/5px 54px ,
linear-gradient(black,black) 59px 64px/5px 54px ,
linear-gradient(black,black) 59px 123px/5px 54px ,
linear-gradient(black,black) 59px 182px/5px 54px ,
linear-gradient(black,black) 59px 241px/5px 54px ,
linear-gradient(black,black) 118px 5px/5px 54px ,
linear-gradient(black,black) 118px 64px/5px 54px ,
linear-gradient(black,black) 118px 123px/5px 54px ,
linear-gradient(black,black) 118px 182px/5px 54px ,
linear-gradient(black,black) 118px 241px/5px 54px ,
linear-gradient(black,black) 177px 5px/5px 54px ,
linear-gradient(black,black) 177px 64px/5px 54px ,
linear-gradient(black,black) 177px 123px/5px 54px ,
linear-gradient(black,black) 177px 182px/5px 54px ,
linear-gradient(black,black) 177px 241px/5px 54px ,
linear-gradient(black,black) 236px 5px/5px 54px ,
linear-gradient(black,black) 236px 64px/5px 54px ,
linear-gradient(black,black) 236px 123px/5px 54px ,
linear-gradient(black,black) 236px 182px/5px 54px ,
linear-gradient(black,black) 236px 241px/5px 54px ,
linear-gradient(black,black) 295px 5px/5px 54px ,
linear-gradient(black,black) 295px 64px/5px 54px ,
linear-gradient(black,black) 295px 123px/5px 54px ,
linear-gradient(black,black) 295px 182px/5px 54px ,
linear-gradient(black,black) 295px 241px/5px 54px ,
repeating-linear-gradient(-10deg,#ffffdd,#ffeebb,#ffffdd 30px);
background-repeat:no-repeat;
}
</style>
<div class="test"> </div>
「linear-gradient」がたっくさん並んでいますが、これ１行が１つの「壁」です。
行の最後が、「54px 5px」になっているのが「縦を阻む横長の壁」、「5px 54px」が「横を阻む縦長の壁」です。
壁を抜く
linear-gradientの１行＝１つの壁なので、一部「行削除」をしてみると、このように壁が消える事になります。
これで「迷路を描く」事は出来そうですね^^
…手動でやるとめちゃくちゃ大変ですが^^;;;;;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
