如何创建响应式4 div钻石？

Question

我正在开展一个项目,在那里我有一些需要响应的div钻石图片.

下图显示了我创建的div中的钻石,但它并不适用于所有尺寸.我希望钻石能够根据浏览器的大小做出反应,因此它始终适合.

我有一个jsFiddle,但它没有响应.只是为了展示我想要的东西,我一直在努力创造.

<div id="page">
<div id="main">
    <div class="box blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box yellow"></div>
</div>
</div>

#page {
    width:100%;
    height:100%;
    min-height:500px;
    min-width:500px;
}
#main {
    height:80px;
    width:80px;
    position:relative;
    display:block;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
}
.box {
    display: inline-block;
    height:35%;
    width:35%;
    margin-right:5%;
    margin-top:5%;
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}
.red {
    background-color:red;
}
.yellow {
    background-color:#ffd54f;
}

很感谢任何形式的帮助 :-)

Answer 1

从响应基础开始:

#main {
    width: 35%;
    height: 0;
    position: relative;
    padding-bottom: 35%;
    border: solid 1px black;
    margin: auto;
}

诀窍是将垂直尺寸设置为填充百分比,即根据父级的宽度计算.(所以它总是一个正方形)

现在设置钻石,翻译为百分比.

.box {
    height:100%;
    width:100%;
    position: absolute;
}
.blue {
    background-color:blue;
    -webkit-transform: translate(-75%, 100%) rotate(45deg);
}
.green {
    background-color:green;
    -webkit-transform: translate(0, 25%) rotate(45deg);
}
.red {
    background-color:red;
    -webkit-transform: translate(75%, 100%) rotate(45deg);
}
.yellow {
    background-color:#ffd54f;
    -webkit-transform: translate(0, 175%) rotate(45deg);
}

小提琴