如何將div放在響應式旋轉div之上？

Question

我正試圖讓這個設計：

但是我遇到了徽標和漩渦的問題，我不知道如何添加它們。 我嘗試過絕對定位，但在調整網站大小時，徽標和漩渦最終會出現與圖像正方形不同的地方。

如何添加漩渦和徽標？

JSFiddle： http ： //jsfiddle.net/uHsJv/1/
當你想編輯JS小提琴時，在我網站上的images文件夾中你可以找到以下圖像：
- 徽標（images / logo.png或images / logogroot.png）
- 頂部的兩個漩渦，包括logo（images / boven.png）
- 底部的兩個漩渦（images / onder.png）
- 完整的'背景'（images / achtergrond.png）

目前的HTML：

<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

    <div class="box side left"><!-- Open .box -->
        <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->


    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="leftUp"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
      <div class="leftDown"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftDown"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
    </div> <!-- Close .boxWrap -->

    <div class="box"><!-- Open .box -->
        <a class="boxInner innerMiddle"><!-- Open .boxInner -->
        <div class="overlay white"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->

    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="rightUp"><!-- Open .box -->
        <a href="#" class="boxInner innerRightUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
      <div class="rightDown"><!-- Open .box -->
        <a href="#" class="boxInner innerRightDown"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
    </div> <!-- Close .boxWrap -->

    <div class="box side right"><!-- Open .box -->
        <a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->

</div></div></div><!-- Close .wrap -->

目前的CSS：

body {
    margin: 0;
    padding: 0;
    background-color:#1b1b1b;
}

.outer{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.middle{
    display: table-cell;
    vertical-align: middle;
}
.wrap {
    margin-left: auto;
    margin-right: auto; 
    height:100%;
    overflow: hidden;

    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;    
}

.box {
    float: left;
    position: relative;
    width: 24.45%;
    padding-bottom: 24.45%;

    margin:auto;

    top: 0; left: 0; bottom: 0; right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.side {
    width: 17.57%;
    padding-bottom: 17.57%;
}

.left{
    left:3%;
}

.right{
    left:-3%;
}

.boxWrap{
    float: left;
    position: relative;
    width: 11.49%;

    margin:auto;
    padding:0;

    top: 0; left: 0; bottom: 0; right: 0;
}

.leftUp, .leftDown, .rightUp, .rightDown{
    width: 100%;
    padding-bottom:100%;
    position:relative;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.leftUp, .leftDown{
    margin-left:7%;
}

.rightUp, .rightDown{
    margin-left:-7%;
}

.leftDown, .rightDown{
    margin-top:38%;
}

.boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;

    margin:0;
    padding:0;

    background-size:cover;
    background-repeat: no-repeat;
}

.innerLeft{
    background-image:url('../images/home_links.png');
}
.innerMiddle{
    background-image:url('../images/home_midden.png');
}
.innerRight{
    background-image:url('../images/home_rechts.png');
}

.innerLeftUp{
    background-image:url('../images/home_linksB.png');
}
.innerLeftDown{
    background-image:url('../images/home_linksO.png');
}
.innerRightUp{
    background-image:url('../images/home_rechtsB.png');
}
.innerRightDown{
    background-image:url('../images/home_rechtsO.png');
}

.overlay{
    height:100%;
    z-index:2;
    overflow:hidden;
    margin:0;
    padding:0;
}

.blue{
    background: rgba(0,101,147,0.40);
}

.blue:hover{
    background: rgba(185,185,185,0.40);
}

.hover:hover{
    background: rgba(245,245,245,0.40);
}

.blue:active, .hover:active{
    background: rgba(178,46,47,0.40);
}

Answer 1

我將裝飾圖像放在中心.box元素中，並通過向它們的父級提供相反的旋轉來拉直它們，即旋轉：-45deg。

這種方法的主要問題是元素圍繞其中心旋轉，中心的位置取決於元素的寬度。 在響應式設計中，這意味着中心的位置取決於頁面寬度，即它可以移動。

為了解決這個問題，我在圖像周圍放置了兩個包裝元素。 外包裝（.straight）的寬度為1％。 這使得它足夠窄，寬度的微小變化不會顯着影響其內容的定位。 然后將該外包裝旋轉-45度。

內包裝（.straight div）的寬度為10,000％。 這使內包裝的寬度等於.box元素的寬度（1％x 10000％= 100％）。 然后可以將裝飾圖像放置在該圖像包裝中並且正常地定尺寸，定位等。

我做了兩次，一次用於頂部圖像，一次用於底部圖像。 頂部圖像的CSS位於此處，底部圖像的位置相似：

.straight{
  color:white;
  position:absolute;
  width:1%;
  height:1%;
  -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align:center;
}
.straight.top div{
  width:10000%;
  left:-5000%;
  top:-2000%;
  position:relative;
}

http://jsfiddle.net/John_C/8kFkR/