Come posizionare il div in cima al div ruotato reattivo?

Question

Sto cercando di ottenere questo disegno:

ma sto avendo problemi con il logo e le volute, non so come aggiungerli. Ho provato con il posizionamento assoluto, ma quando ridimensiono il sito web, il logo e i vortici finiscono in un punto diverso dai quadrati dell'immagine.

Come posso aggiungere i turbinii e il logo?

JSFiddle:http://jsfiddle.net/uHsJv/1/
Quando si desidera modificare il violino JS, nella cartella immagini sul mio sito si possono trovare le seguenti immagini:
- il logo (immagini/logo.png o le immagini/logogroot .png)
- i due vortici sul logo in alto inclusi (immagini/boven.png)
- i due vortici sul fondo (immagini/onder.png)
- la completa 'background' (immagini/sfondo. png)

HTML attuale:

<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 attuale:

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

ho messo le immagini decorative all'interno dell'elemento centrale .box e raddrizzato dando loro la rotazione opposto al loro genitore, cioè ruotare: -45 gradi.

Il problema principale di questo approccio è che gli elementi ruotano attorno al loro centro e la posizione del centro dipende dalla larghezza dell'elemento. Nei progetti reattivi, ciò significa che la posizione del centro dipende dalla larghezza della pagina, ovvero può muoversi.

Per contrastare ciò, ho posizionato 2 elementi di wrapper attorno all'immagine. Il wrapper esterno (.straight) ha una larghezza dell'1%. Ciò rende abbastanza stretto il fatto che lievi modifiche nella sua larghezza non influenzino in modo sensibile il posizionamento del suo contenuto. Questo involucro esterno viene quindi ruotato di -45 gradi.

L'involucro interno (.straight div) ha una larghezza del 10.000%. Ciò fornisce al wrapper interno una larghezza uguale alla larghezza dell'elemento .box (1% x 10000% = 100%). L'immagine decorativa può quindi essere collocata in questo involucro di immagini e ridimensionata, posizionata ecc. Come al solito.

Ho fatto questo due volte, una volta per l'immagine in alto e una volta per l'immagine in basso. Il CSS per l'immagine in alto è qui, l'immagine in basso è stato posizionato in modo simile:

.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/