html - 如何创建响应式 4 div 菱形？

Question

我正在做一个元素，我有一个需要响应的 div 钻石图片。

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

我有a 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);
}

fiddle