Notsoprosql Notsoprosql - 3 months ago 19
HTML Question

CSS Positioning Absolute (4 Diamonds close together)

Hello Stackoverflow users!

I need your assistance once again.

I am trying to put 4 diamonds together in the center of a page to act as navigation on a landing page. the 4 diamonds should make a diamond of them self and I really cannot think how to do this.

I have tried doing position absolute but then its screwed responsive.

I have bootstrap on this website so maybe there is a solution with columns? I have 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>





4 Diamonds Creating 1 Diamond Navigation.

Answer

Please ad a parent div with relative position. Something like the code below and set the position for the diamonds related to this div.

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

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

My solution is here, but I added the values with inspect element, you can update with 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>