Absolute CSS positioning (4 diamonds close together)

Question

Hi, users of Stackoverflow!

I need your help again.

I am trying to put 4 diamonds together in the center of the page to act like navigation on the landing page. 4 diamonds should make a diamond of them myself, and I really can’t think how to do it.

I tried to make the position absolute, but then its screwy responsiveness.

I have a loading tray on this site, so maybe there is a column solution? I tried everything, please help.

.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

Refer to the parent div with relative position. Something like the code below and set the position for the diamonds associated with this div.

 .wrap{ position:relative; width:300px; height:300px; } <div class="wrap"> ... </div> 

My solution is here, but I added values ​​with a validation element, you can update something more specific. I think,

  .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 the diamond in a wrapper and place it relative to the wrapper.

 .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, I have a suggestion for this solution. Give a gentle hover effect.

Like this

 <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

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

I think your solution will be ok with the user interface.