CSS 绝对定位（4 颗钻石靠在一起）

Question

您好 Whosebug 用户！

我再次需要你的帮助。

我正在尝试将 4 个菱形放在页面中央以充当着陆页上的导航。这 4 颗钻石应该自己做成一颗钻石，我真的不知道该怎么做。

我试过做绝对位置，但后来它的反应很糟糕。

我在这个网站上有 bootstrap，所以也许有列的解决方案？我已经试过了，请帮忙。

.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

用包装纸包裹钻石并将其相对于包装纸定位。

.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

请给家长 div 提供相对位置。类似于下面的代码，并设置与此相关的菱形的位置 div.

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

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

我的解决方案在这里，但我用 inspect 元素添加了值，你可以更新一些我认为更具体的东西

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

嘿，我对此解决方案有一个建议。也给一些温和的悬停效果。

像这样

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

我认为您的解决方案适用于 UI。

CSS 绝对定位（4 颗钻石靠在一起）

CSS Positioning Absolute (4 Diamonds close together)

html

css

twitter-bootstrap

responsive