Pozycjonowanie CSS Absolute (4 Diamenty blisko siebie)

Question

Witajcie użytkowników Stackoverflow!

Potrzebuję twojej pomocy jeszcze raz.

Próbuję umieścić 4 diamenty na środku strony, aby działały jak nawigacja na stronie docelowej. 4 diamenty powinny zrobić z nich sam diament i naprawdę nie mogę myśleć, jak to zrobić.

Próbowałem robić pozycję absolutną, ale potem jej śruba reaguje.

Mam bootstrap na tej stronie, więc może istnieje rozwiązanie z kolumnami? Próbowałem wszystkiego, proszę o pomoc.

.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

Proszę ogłoszenie div dominującej ze względnym położeniu. Coś jak poniższy kod i ustaw pozycję dla diamentów związanych z tym div.

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

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

Moje rozwiązanie jest tutaj, ale dodałem wartości z inspekcji elementu, można zaktualizować z czymś bardziej specyficzne myślę

.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 diament w opakowaniu i umieścić go w stosunku do owinięcia.

.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

Hej mam propozycję dla tego rozwiązanie. Daj również łagodny efekt unoszący się.

Ci się to

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

CSS jest

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

Myślę, że twoje rozwiązanie będzie w porządku z interfejsem użytkownika.