CSS Positioning Absolute (4 Diamonds close together)

Question

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>

Answer 1

Wrap the diamond in a wrapper and position 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 2

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>