CSS定位绝对(4颗钻石紧密相连)

Question

你好Stackoverflow用户!

我再次需要你的帮助.

我试图将4颗钻石放在一个页面的中心,作为登陆页面上的导航.4颗钻石应该让它们成为自己的钻石,我真的想不出怎么做.

我已经尝试过绝对的位置,但随后它的反应灵敏.

我在这个网站上有自举,所以也许有一个列的解决方案？我试过一切请帮忙.

.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

请添加具有相对位置的父级 div。像下面的代码一样，设置与该 div 相关的菱形的位置。

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

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

我的解决方案在这里，但我使用检查元素添加了值，您可以使用我认为更具体的内容进行更新

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

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

   .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);
  }
}