Question

我正在开展一个项目，在这个项目中，我有一些需要响应的图片钻石。

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

current website with nonresponsive diamond

我有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

Answer 2

编辑：好的，可以单独用CSS完成。更新了小提琴： http://jsfiddle.net/5CfNb/5/

不确定是否可以单独使用CSS，但这是我使用几行jQuery的解决方案。根据宽高比，它不会是一个完美的“钻石”，所以仍然需要一些调整。但我希望这会有所帮助。

$('#main').height($(window).height());
$('#main').width($(window).width());

$(window).resize(function() {
    $('#main').height($(window).height());
    $('#main').width($(window).width());
});

http://jsfiddle.net/5CfNb/4/

Answer 3

这也可以帮到你：http://jsfiddle.net/maximgladkov/bJLYn/1/

#main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -15% 0 0 -15%;
    height: 0px;
    width: 30%;
    padding-top: 30%;
    overflow: visible;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.box {
    display: block;
    width: 45%;
    height: 45%;
    position: absolute;
}
.blue {
    background: blue;
    top: 0;
    left: 0;
}
.green {
    background: green;
    top: 0;
    right: 0;
}
.red {
    background: red;
    bottom: 0;
    right: 0;
}
.yellow {
    background: #ffd54f;
    bottom: 0;
    left: 0;
}

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

3 个答案: