css - 具有直背景图像的 Div 钻石

Question

我有几个 div，我想将它们旋转成菱形，但我不希望它们的背景图像旋转，我该如何实现？这是我现在的代码

<div id="diamonds">

<div class="diamond-big diamond-tiesto"><img src="<?php echo $images_url; ?>dj-1-overlay.png" /></div>

</div>

和我的 CSS:

#diamonds div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); 
float:left;
}

.diamond-tiesto {background-image:url('images/dj-1.jpg'); background-size:cover; width:212px; height:212px; margin-left:160px; margin-right:120px;}
.diamond-tiesto img {margin-top:80px; margin-left:-20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg); 
}

基本上我正在努力实现这个 http://mqchen.github.io/jquery.diamonds.js/没有jquery，任何人有任何建议

这里有一个 fiddle 以防万一:

http://jsfiddle.net/7qj8h/1/

Answer 1

您可以使用 this article 中描述的技术并将转换应用于背景图像伪元素。

演示/代码在这里:http://jsfiddle.net/7qj8h/4/

HTML:

<div id="diamonds">
    <div class="diamond-big diamond-tiesto">
        <img src="http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1-overlay.png" />
    </div>  
</div>

CSS:

.diamond-big
{
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 200px;

    /* rotate diamond */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.label {
    /* counter rotate label */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    /* position label */
    margin-top:80px;
    margin-left:-20px;
}
.diamond-big:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;

    /* counter rotate bg */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* set bg for different DJs */
.diamond-tiesto:before {
        background: url(http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg) 0 0 repeat;
}