CSS Positionierung absolut (4 Diamanten dicht beieinander)

Question

Hallo Stackoverflow Benutzer!

Ich brauche deine Hilfe noch einmal.

Ich versuche, 4 Diamanten in der Mitte einer Seite zusammenzufassen, um als Navigation auf einer Zielseite zu fungieren. die 4 Diamanten sollten einen Diamanten von ihnen selbst machen und ich kann wirklich nicht denken, wie man das macht.

Ich habe versucht, absolute Position zu tun, aber dann ist es geschraubt reagiert.

Ich habe Bootstrap auf dieser Website, also gibt es vielleicht eine Lösung mit Spalten? Ich habe alles versucht, bitte helfen Sie mir.

.diamond-top { 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 39%; 
 
} 
 
.diamond-left { 
 
    position: absolute; 
 
    left: 30%; 
 
    top: 38%; 
 
} 
 
.diamond-right { 
 
    position: absolute; 
 
    left: 48%; 
 
    top: 38%; 
 
} 
 
.diamond-bottom { 
 
    position: absolute; 
 
    top: 51%; 
 
    left: 39%; 
 
} 
 
.diamond-container { 
 
    width: 212px; 
 
    height: 212px; 
 
    padding: 30px; 
 
} 
 
.diamond-container:hover .tile-link { 
 
    -webkit-animation: rotateYaxis 5s linear infinite; 
 
} 
 
.tile-link { 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: block; 
 
    position: relative; 
 
    line-height: 150px; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
    transition: 1s ease-in-out; 
 
    transform-origin: center; 
 
} 
 
.tile-link:hover { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
.tile-link:hover:before { 
 
    background: yellow; 
 
} 
 
.tile-link:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 150px; 
 
    height: 150px; 
 
    background: white; 
 
    box-shadow: inset 0 0 0 5px yellow; 
 
    transform: rotate(-45deg); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    transition: 1s ease-in-out; 
 
} 
 
@-webkit-keyframes rotateYaxis { 
 
    0% { 
 
    -webkit-transform: rotate3d(0, 1, 0, 0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate3d(0, 1, 0, 720deg); 
 
    } 
 
}

<div class="diamond-top"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 1</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-left"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 2</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-bottom"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-right"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 4</a> 
 
    </div> 
 
</div>

Answer 1

aufgeben Eltern div mit relativer Position. Etwas wie der Code unten und legen Sie die Position für die Diamanten in Bezug auf dieses div.

.wrap{ 
    position:relative; 
    width:300px; 
    height:300px; 
} 

<div class="wrap"> 
    ... 
</div> 

Meine Lösung ist hier, aber ich hinzugefügt die Werte mit dem Element überprüfen, Sie mit etwas aktualisieren können spezifischere Ich denke

.wrap{ 
 
    position:relative; 
 
    width:300px; 
 
    height:300px; 
 
} 
 
.diamond-top { 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 39%; 
 
} 
 
.diamond-left { 
 
position: absolute; 
 
left: 13px; 
 
top: 60%; 
 
} 
 
.diamond-right { 
 
position: absolute; 
 
left: 75%; 
 
top: 60%; 
 
} 
 
.diamond-bottom { 
 
position: absolute; 
 
top: 95%; 
 
left: 39%; 
 
} 
 
.diamond-container { 
 
    width: 212px; 
 
    height: 212px; 
 
    padding: 30px; 
 
} 
 
.diamond-container:hover .tile-link { 
 
    -webkit-animation: rotateYaxis 5s linear infinite; 
 
} 
 
.tile-link { 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: block; 
 
    position: relative; 
 
    line-height: 150px; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
    transition: 1s ease-in-out; 
 
    transform-origin: center; 
 
} 
 
.tile-link:hover { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
.tile-link:hover:before { 
 
    background: yellow; 
 
} 
 
.tile-link:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 150px; 
 
    height: 150px; 
 
    background: white; 
 
    box-shadow: inset 0 0 0 5px yellow; 
 
    transform: rotate(-45deg); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    transition: 1s ease-in-out; 
 
} 
 
@-webkit-keyframes rotateYaxis { 
 
    0% { 
 
-webkit-transform: rotate3d(0, 1, 0, 0deg); 
 
    } 
 
    100% { 
 
-webkit-transform: rotate3d(0, 1, 0, 720deg); 
 
    } 
 
}

<div class="wrap"> 
 
<div class="diamond-top"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 1</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-left"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 2</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-bottom"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-right"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 4</a> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

Wrap der Diamant in einer Umhüllung und Position der Verpackung in Bezug darauf.

.diamond-wrapper{ 
 
    position: absolute; 
 
    width: 272px; 
 
    height: 272px; 
 
    padding: 30px; 
 
    left: 150px; 
 
    top: 150px; 
 
    margin: auto; 
 
} 
 

 
.diamond-top { 
 
    position: absolute; 
 
    top: -25%; 
 
} 
 
.diamond-left { 
 
    position: absolute; 
 
    left: -25%; 
 
} 
 
.diamond-right { 
 
    position: absolute; 
 
    right: -25%; 
 
} 
 
.diamond-bottom { 
 
    position: absolute; 
 
    bottom: -25%; 
 
} 
 
.diamond-container { 
 
    width: 212px; 
 
    height: 212px; 
 
    padding: 30px; 
 
} 
 
.diamond-container:hover .tile-link { 
 
    -webkit-animation: rotateYaxis 5s linear infinite; 
 
} 
 
.tile-link { 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: block; 
 
    position: relative; 
 
    line-height: 150px; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
    transition: 1s ease-in-out; 
 
    transform-origin: center; 
 
} 
 
.tile-link:hover { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
.tile-link:hover:before { 
 
    background: yellow; 
 
} 
 
.tile-link:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 150px; 
 
    height: 150px; 
 
    background: white; 
 
    box-shadow: inset 0 0 0 5px yellow; 
 
    transform: rotate(-45deg); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    transition: 1s ease-in-out; 
 
} 
 
@-webkit-keyframes rotateYaxis { 
 
    0% { 
 
    -webkit-transform: rotate3d(0, 1, 0, 0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate3d(0, 1, 0, 720deg); 
 
    } 
 
}

<div class="diamond-wrapper"> 
 
<div class="diamond-top"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 1</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-left"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 2</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-bottom"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="diamond-right"> 
 
    <div class="diamond-container"> 
 
    <a href="#" class="yellow tile-link">Link 4</a> 
 
    </div> 
 
</div> 
 
</div>

Answer 3

Hey ich habe einen Vorschlag für diese Lösung. Geben Sie auch einen sanften Hover-Effekt.

Gefällt Ihnen dieses

<div class="DiamondContainer"> 
     <div class="dmd dmd1"> 
      <div> 
      <a href="#" class="yellow tile-link">dmd</a> 
      </div> 
     </div> 

     <div class="dmd dmd2"> 
      <div> 
      <a href="#" class="yellow tile-link">dmd</a> 
      </div> 
     </div> 

     <div class="dmd dmd3"> 
      <div> 
      <a href="#" class="yellow tile-link">dmd</a> 
      </div> 
     </div> 

     <div class="dmd dmd4"> 
      <div> 
      <a href="#" class="yellow tile-link">dmd</a> 
      </div> 
     </div> 
    </div> 

Die CSS ist

.DiamondContainer{ 
    width:230px; 
    transform:rotateZ(45deg); 
    margin:200px; 
    background-color:#000; 
} 
.dmd{ 
    width:100px; 
    height:100px; 
    float:left; 
    border: 2px solid #ffc65f; 
    background-color: #fffaf1; 
    transition: all 0.5s ease 
} 
.dmd a{ 
    display:block; 
    transform:rotateZ(-45deg); 
    line-height:100px; 
    text-align:center; 
    color:#000; 
    text-decoration:none; 
} 
.dmd1:hover{ 
    position: relative; 
    left: -22px; 
    top: -24px; 
    background: #ffc65f; 
    border: 2px solid #fffaf1; 
    color: #fff;  
} 
.dmd2:hover{ 
    position: relative; 
    left: 22px; 
    top: -22px; 
    background: #ffc65f; 
    border: 2px solid #fffaf1; 
    color: #fff; 
} 
.dmd3:hover{ 
    position: relative; 
    left: -22px; 
    top: 22px; 
    background: #ffc65f; 
    border: 2px solid #fffaf1; 
    color: #fff; 
} 
.dmd4:hover{ 
    position: relative; 
    left: 22px; 
    top: 22px; 
    background: #ffc65f; 
    border: 2px solid #fffaf1; 
    color: #fff; 
} 

https://jsfiddle.net/befLws89/

.DiamondContainer{ 
 
    width:230px; 
 
    transform:rotateZ(45deg); 
 
    margin:200px; 
 
    background-color:#000; 
 
} 
 
.dmd{ 
 
    width:100px; 
 
    height:100px; 
 
    float:left; 
 
    border: 2px solid #ffc65f; 
 
    background-color: #fffaf1; 
 
    transition: all 0.5s ease 
 
} 
 
.dmd a{ 
 
    display:block; 
 
    transform:rotateZ(-45deg); 
 
    line-height:100px; 
 
    text-align:center; 
 
    color:#000; 
 
    text-decoration:none; 
 
} 
 
.dmd1:hover{ 
 
    position: relative; 
 
    left: -22px; 
 
    top: -24px; 
 
    background: #ffc65f; 
 
    border: 2px solid #fffaf1; 
 
    color: #fff;  
 
} 
 
.dmd2:hover{ 
 
    position: relative; 
 
    left: 22px; 
 
    top: -22px; 
 
    background: #ffc65f; 
 
    border: 2px solid #fffaf1; 
 
    color: #fff; 
 
} 
 
.dmd3:hover{ 
 
    position: relative; 
 
    left: -22px; 
 
    top: 22px; 
 
    background: #ffc65f; 
 
    border: 2px solid #fffaf1; 
 
    color: #fff; 
 
} 
 
.dmd4:hover{ 
 
    position: relative; 
 
    left: 22px; 
 
    top: 22px; 
 
    background: #ffc65f; 
 
    border: 2px solid #fffaf1; 
 
    color: #fff; 
 
}

<div class="DiamondContainer"> 
 
     <div class="dmd dmd1"> 
 
      <div> 
 
      <a href="#" class="yellow tile-link">dmd</a> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="dmd dmd2"> 
 
      <div> 
 
      <a href="#" class="yellow tile-link">dmd</a> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="dmd dmd3"> 
 
      <div> 
 
      <a href="#" class="yellow tile-link">dmd</a> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="dmd dmd4"> 
 
      <div> 
 
      <a href="#" class="yellow tile-link">dmd</a> 
 
      </div> 
 
     </div> 
 
    </div>

Ich denke, dass diese Lösung mit der Benutzeroberfläche in Ordnung sein wird.