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

ラッパーでダイヤモンドをラップし、ラッパーに関連し、それを配置します。

.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

考えるより具体的な何かを更新することができますねえ、私はこのための提案を持っています溶液。優しいホバー効果もあげてください。

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>

ある

<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でうまくいくと思います。