CSSデザイン 四角形を並べる

Question

#やりたいこと

正方形のボタンを4つ作り、
下記画像のように並べたいです。

さらに可能ならレスポンシブにして正方形が流動的に並び変わるようになるのが理想です。

CSSでいじってはみたのですが、
この形にもっていくことができず、相談させていただいた次第です。

よろしくお願いします。

Answer 1

<div class="figure">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

div.figure {
  position: relative;
}

div.figure div {
  height: 100px;
  width: 100px;
  border: solid black 1px;
  position: absolute;
}

div.figure div:nth-of-type(1) {
  transform: rotateZ(45deg);
}

div.figure div:nth-of-type(2) {
  transform: translate(-70%, 70%) rotateZ(45deg) ;
}

div.figure div:nth-of-type(3) {
  transform: translate(70%, 70%) rotateZ(45deg) ;
}

div.figure div:nth-of-type(4) {
  transform: translate(0, 140%) rotateZ(45deg) ;
}

Answer 2

CSS3が利用できることが前提。
Chromeでしか確認してないですが、以下で表示される気がします。
追記：
流動的にという点のイメージがピンとこなかったので、そのまま拡大します。

◆
　◆
　　◆
　　　◆

みたいなことでしょうか

<div style="
    width: 10vw;
    height: 10vw;
    transform: rotateZ(45deg);
">
  <div style="
    width: 50%;
    border: 1px solid black;
    height: 50%;
    box-sizing: border-box;
    float: left;
    background-color: white;
"></div>
  <div style="
    width: 50%;
    border: 1px solid black;
    height: 50%;
    box-sizing: border-box;
    float: left;
    margin-left: -1px;
    background-color: white;
"></div>
  <div style="
    width: 50%;
    border: 1px solid black;
    height: 50%;
    box-sizing: border-box;
    clear: both;
    float: left;
    margin-top: -1px;
    background-color: white;
"></div>
  <div style="
    width: 50%;
    border: 1px solid black;
    height: 50%;
    box-sizing: border-box;
    float: left;
    margin-top: -1px;
    margin-left: -1px;
    background-color: white;
"></div>
</div>

Comments

[hirotaka612]

ありがとうございます！！
流動的にというところは並びを崩して縦に4つ並べるイメージでしたが、
とりあえず形を保ったまま可変で行きます。
ありがとうございました！

新たな問題が発生しまして、、
もしお時間あれば次の質問も検討いただけると幸いです。